La manière traditionnelle d'écrire des composants Web n'est pas très conviviale SSR (Server Side Rendering). Dans cet article, je vous montre comment créer des composants Web réactifs qui fonctionnent avec SSR et avec n'importe quel framework JavaScript (Vue, React, Svelte, Solid, Brisa) ou Vanilla JS.
Nous allons utiliser Brisa Web Component Compiler. Brisa est un framework Web qui, en plus d'être similaire à d'autres frameworks comme Next.js ou Nuxt.js, vous permet également de créer des composants Web réactifs qui fonctionnent avec des signaux de réactivité, avec JSX et avec SSR.
Pour ce faire, il vous suffit de connaître la syntaxe de Brisa lors de l'écriture des composants Web. Brisa n'est pas encore public car il se trouve actuellement à95,48% de la feuille de route v0.1, mais nous estimons que dans 1 mois il sera prêt à être lancé et que tout le monde pourra y accéder. Cependant, même s'il n'est pas du tout public, vous pouvez déjà l'utiliser pour créer vos propres bibliothèques de composants Web.
A titre d'exemple, nous allons écrire un Composant Web d'un compteur, comme toujours, l'exemple classique.
comptoir-wc.tsx
import type { WebContext } from "brisa"; export default function CounterWC( { start = 0, color = "#2cebcf" }: { start?: number; color?: string }, { state, css }: WebContext, ) { const count = state(start); css` button { background-color: ${color}; color: white; border: none; border-radius: 5px; padding: 10px; margin: 5px; cursor: pointer; } div { display: flex; justify-content: center; align-items: center; } `; return ( {count.value} ); }
Brisa utilise le nom des fichiers pour connaître le sélecteur, ici le sélecteur serait contre-wc.
CONSEIL: Bien que Brisa ne soit pas encore public, vous pouvez utiliser des types TypeScript pour vous guider sur la façon d'écrire des composants Web.
Dans l'exemple ci-dessus, l'état est utilisé pour créer un signal, puis en utilisant le .value, vous le rendez réactif à l'intérieur du JSX. Les accessoires sont également des signaux spéciaux, car comme ils sont en lecture seule, le .value n'est pas utilisé pour le rendre plus facile à utiliser et pour définir plus facilement les valeurs par défaut, cela se fait via des optimisations au moment de la construction, similaires à React pour agir comme s'ils utilisaient des signaux mais l'inverse.
Le littéral du modèle CSS lui permet de réagir aux changements réactifs dans ce cas de la propriété color. Ce modèle CSS littéral en dehors de cet exemple est très utile pour créer facilement des animations réactives. Il est important de se rappeler que les composants Web fonctionnent avec Shadow DOM, le CSS n'affecte donc pas le reste de la page.
Pour créer le composant Web, vous devez exécuter la commande suivante :
brisa build -w counter-wc.tsx
Cette commande générera 2 fichiers :
[ wait ] ? building your standalone components... [ info ] [ info ] Standalone components: [ info ] - build/counter-wc.client.js (670.00 B) [ info ] - build/counter-wc.server.js (842.00 B) [ info ] [ info ] ✨ Done in 42.20ms.
Ces fichiers ne sont pas le composant Web, c'est seulement la fonction de rendu du composant Web optimisé au moment de la construction pour être aussi léger que possible(les octets qui sortent sont sans gzip).
Alors, comment charger le composant Web ?
Pour ce faire, vous devez ajouter l'importmap dans le HTML avec brisa/client puis importer le fichier counter-wc.client.js :
Brisa Web Component Example
Ici, seule la partie rendu serait portée dans chaque fichier de composant Web, alors qu'ils utiliseraient tous le même wrapper Brisa défini dans l'importmap, qui est responsable de la création du composant Web avec les signaux et le shadow DOM.
La SSR d'un composant Web peut désormais se faire grâce au Declarative Shadow DOM. Le fichier counter-wc.server.js a déjà été compilé avec ce comportement, il vous suffit donc de l'importer sur votre serveur, de le restituer au format HTML et de l'adapter au framework de votre serveur.
Voici un exemple avec Bun.js ou Node.js sans utiliser JSX :
ssr.js
import { renderToString } from "brisa/server"; import { jsx } from "brisa/jsx-runtime"; import CustomCounter from "counter-wc/server"; const html = ` Brisa Web Component Example
${await renderToString(jsx(CustomCounter, { start: 10 }))} `; console.log(html);
Ensuite, exécutez bun run ssr.js et vous verrez le HTML avec le composant Web rendu à l'aide du Declarative Shadow DOM.
L'intégration de ces bibliothèques de composants Web avec Brisa se fait via un fichier de configuration :
import type { WebComponentIntegrations } from "brisa"; export default { "custom-counter": { client: "./path/to/web-component.client.js", server: "./path/to/web-component.server.js", types: "./path/to/web-component.types.d.ts", }, } satisfies WebComponentIntegrations;
De cette manière, les types SSR et TypeScript sont automatiquement intégrés à votre projet. Et vous pouvez utiliser le composant Web dans n'importe quel composant serveur ou dans un autre composant Web.
Si vous souhaitez en savoir plus, je vous invite à vous inscrire à la newsletter Brisa pour recevoir les dernières nouvelles et mises à jour sur Brisa. Nous estimons que d'ici fin septembre, il sera prêt à être lancé.
We encourage you to try Brisa to create your own Web Component libraries. If you put the "made with Brisa" badge, we will put a link to your library on the Brisa page.
If you want to see the GitHub repository of the example of the counter that we have explained in this article, you can take a look and use it as a reference for your own creations:
In this post, we have seen how to build reactive Web Components that work with SSR and with any JavaScript framework or Vanilla JS. We have used Brisa to build the Web Component and we have seen how to load it in a Vanilla JS project and how to do SSR with it.
I hope you have enjoyed this post and that you have learned something new. If you have any questions, do not hesitate to ask me in the comments below. I will be happy to help you.
Happy coding and enjoy the rest of the summer! ??
Atas ialah kandungan terperinci Bina Komponen Web Reaktif dengan SSR. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
