Utilisation de composants Web avec Next (ou tout cadre SSR)

Mon article précédent a exploré Shoelace, une bibliothèque de composants offrant un ensemble complet de composants UX accessibles visuellement attrayants construits à l'aide de composants Web. Cette architecture permet l'utilisation agnostique du cadre. Bien que l'intégration des composants Web de React ne soit pas optimale, il existe des solutions de contournement.

Une limitation significative des composants Web est leur manque actuel de prise en charge de rendu côté serveur (SSR). Decarative Shadow Dom (DSD) est en cours de développement, mais la prise en charge actuelle est limitée et nécessite des modifications côté serveur. Le développement suivant. JS dans ce domaine est prometteur. Cet article se concentre sur la gestion des composants Web dans n'importe quel cadre SSR, y compris Next.js, en utilisant les techniques actuelles.

Cette approche implique des étapes manuelles et un léger impact sur les performances sur la charge de page initiale. Nous aborderons les stratégies d'optimisation des performances. Cette solution n'est pas sans compromis; Les tests et le profilage approfondis sont cruciaux.

Le défi: SSR et composants Web

Pourquoi les composants Web ne s'intègrent-ils pas de manière transparente avec SSR?

frameworks comme Next.js Process React Code, Conversion des composants en HTML simple. L'arborescence des composants React rend sur le serveur, et ce HTML est envoyé au navigateur client. Avec ce HTML, les balises chargent des balises React et du code de composant. Le navigateur recouvrait l'arborescence des composants, en le faisant correspondre avec le HTML rendu du serveur. Ce processus, connu sous le nom d'hydratation, active les effets, les gestionnaires d'événements et la gestion de l'État, ce qui rend l'application interactive.

Les composants Web compliquent cela. Lorsque vous rendez un composant comme Shoelace's <sl-tab-group></sl-tab-group>:

<sl-tab-group ref="{tabsRef}">
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>

react (ou tout framework JavaScript) transmet directement ces balises. La logique de rendu réside dans le code du composant Web (dans ce cas, Shoelace). Le synchronisation de cette exécution de code est critique.

En règle générale, l'enregistrement des composants Web se produit via une importation JavaScript pendant l'hydratation. Cela signifie que les composants ne rendront pas correctement avant l'hydratation, conduisant à un flash de contenu non style (FOUC). Bien que vous puissiez théoriquement ajouter un balisage d'espace réservé, il n'est pas pratique, en particulier avec les bibliothèques tierces.

Enregistrement des composants Web de pré-hydrat

Le problème est l'exécution retardée du code d'enregistrement des composants Web jusqu'à l'hydratation. Notre solution consiste à exécuter ce code plus tôt, immédiatement. Nous allons sur mesure le code du composant Web et ajouter un script de blocage au du document. Ceci est généralement indésirable, car il contredit l'objectif du SSR, mais il assure un rendu immédiat. L'impact de la performance sera atténué par la mise en cache. Ce n'est pas une solution à long terme idéale. Future Next.js Le support DSD éliminera probablement ce besoin.

Détails d'implémentation

Le code complet est disponible sur ce référentiel GitHub et déployé ici à l'aide de Vercel. L'application rend les composants de Shoelace à côté du texte qui change après l'hydratation. Le texte se mettra à jour vers «hydraté», tandis que les composants de Shoelace rendent correctement dès le début.

Custom Bundling

Tout d'abord, créez un module JavaScript important toutes les définitions de composants Web. Pour le lacet:

<sl-tab-group ref="{tabsRef}">
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>

Ce module ne peut pas être importé directement; Il doit être emballé sur mesure pour empêcher l'inclusion dans les faisceaux JavaScript ordinaires. J'utiliserai Vite. L'installer () et créer npm i vite: vite.config.js

import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";

import "@shoelace-style/shoelace/dist/components/tab/tab.js";
import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";

import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";

setDefaultAnimation("dialog.show", { /* ... */ });
setDefaultAnimation("dialog.hide", { /* ... */ });

Cela crée un bundle dans

. Déplacez-le dans le dossier shoelace-dir pour le service suivant.js. Un script de nœud gère cela et crée un module exportant le nom de fichier du bundle: public

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  build: {
    outDir: path.join(__dirname, "./shoelace-dir"),
    lib: {
      name: "shoelace",
      entry: "./src/shoelace-bundle.js",
      formats: ["umd"],
      fileName: () => "shoelace-bundle.js",
    },
    rollupOptions: {
      output: {
        entryFileNames: `[name]-[hash].js`,
      },
    },
  },
});

et un script NPM correspondant:

// ... (Node script to move the bundle and create a module with the bundle path) ...

Chargement du script

dans Next.js's

, importez le chemin du bundle et ajoutez une balise _document.js au <script></script>:

"bundle-shoelace": "vite build && node util/process-shoelace-bundle",

Cela garantit que l'enregistrement des composants Web s'exécute avant le rendu HTML initial.

Optimisation des performances: mise en cache

Ajouter des en-têtes de mise en cache à la configuration suivante pour améliorer les charges de page suivantes:

// ... (_document.js with script tag added) ...

Cela exploite efficacement la mise en cache du navigateur.

Conclusion

Bien que cette méthode nécessite des étapes manuelles, elle fournit une solution de contournement pour les limites actuelles des composants Web et de la SSR. Les avantages des composants agnostiques du cadre et de l'expérimentation plus facile avec de nouveaux cadres l'emportent sur la complexité initiale de mise en œuvre. Les améliorations futures du support SSR des composants Web simplifieront probablement ce processus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!