Verwenden von Webkomponenten mit dem nächsten (oder einem SSR -Framework)

Mein vorheriger Artikel untersuchte Shoelace, eine Komponentenbibliothek, die eine umfassende Reihe von visuell ansprechenden, zugänglichen UX -Komponenten anbietet, die mit Webkomponenten erstellt wurden. Diese Architektur ermöglicht den Gebrauch von Framework-Agnostic. Während die Integration von Reacts Web -Komponenten nicht optimal ist, existieren Workarounds.

Eine signifikante Einschränkung der Webkomponenten ist der aktuelle Mangel an serverseitiger Rendering (SSR) -Ausstützung. Deklarative Shadow DOM (DSD) ist in der Entwicklung, aber die aktuelle Unterstützung ist begrenzt und erfordert serverseitige Änderungen. Die Entwicklung von NEXT.JS -Entwicklung in diesem Bereich ist vielversprechend. Dieser Artikel konzentriert sich auf die Verwaltung von Webkomponenten in jedem SSR -Framework, einschließlich Next.js unter Verwendung der aktuellen Techniken.

Dieser Ansatz beinhaltet manuelle Schritte und eine leichte Leistungsauswirkungen auf die Last der Anfangsseiten. Wir werden die Strategien zur Leistungsoptimierung angehen. Diese Lösung ist nicht ohne Kompromisse. gründliche Tests und Profilerstellung sind entscheidend.

Die Herausforderung: SSR- und Webkomponenten

Warum integrieren Webkomponenten nicht nahtlos in SSR?

Frameworks wie Next.js React -Code, wodurch Komponenten in einfache HTML konvertiert werden. Der React -Komponentenbaum rendert auf dem Server und dieser HTML wird an den Client -Browser gesendet. Zusammen mit diesem HTML werden Tags Lade -React- und Komponentencode geladen. Der Browser wird den Komponentenbaum erneut veranlasst und ihn mit dem servergerenderten HTML entspricht. Dieser Prozess, der als Hydratation bezeichnet wird, aktiviert Effekte, Ereignishandler und Staatsmanagement, wodurch die Anwendung interaktiv wird.

Webkomponenten komplizieren dies. Beim Rendern einer Komponente wie Shoelaces <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>

reagieren (oder JavaScript -Framework) übergibt diese Tags direkt. Die Rendering -Logik befindet sich im Code der Webkomponente (in diesem Fall Schnürsenkel). Der Zeitpunkt dieser Codeausführung ist kritisch.

In der Regel erfolgt die Registrierung von Webkomponenten über einen JavaScript -Import während der Hydratation. Dies bedeutet, dass die Komponenten erst nach der Flüssigkeitszufuhr korrekt gerendert werden, was zu einem Blitz von nicht stylenem Inhalt (FOUC) führt. Während Sie theoretisch Platzhalter-Markup hinzufügen können, ist es unpraktisch, insbesondere bei Bibliotheken von Drittanbietern.

Registrierung der Webkomponenten vorhydratisieren

Das Problem ist die verzögerte Ausführung des Registrierungscodes für Webkomponenten bis zur Hydratation. Unsere Lösung besteht darin, diesen Code früher auszuführen - sofort. Wir werden den Webkomponentencode benutzerdefiniert und dem Dokument

ein Blockierungsskript hinzufügen. Dies ist im Allgemeinen unerwünscht, da es dem Zweck von SSR widerspricht, aber sofortiges Rendern sicherstellt. Die Leistungsauswirkungen werden durch Caching gemindert. Dies ist keine ideale langfristige Lösung. Future Next.js DSD -Unterstützung wird diesen Bedarf wahrscheinlich beseitigen.

Implementierungsdetails

Der vollständige Code ist in diesem Github -Repository verfügbar und wird hier mit Vercel bereitgestellt. Die Anwendung macht Schnürsenkomponenten zusammen mit Text, der sich nach der Flüssigkeitszufuhr ändert. Der Text wird auf "hydratisiert" aktualisiert, während die Schnürsenkekomponenten von Anfang an korrekt rendern.

benutzerdefinierte Bündelung

Erstellen Sie zunächst ein JavaScript -Modul, das alle Webkomponenten -Definitionen importiert. Für Schnüre:

<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>

Dieses Modul kann nicht direkt importiert werden; Es muss angepasst werden, um die Aufnahme in reguläre JavaScript-Bündel zu verhindern. Ich werde Vite benutzen. Installieren Sie es (npm i vite) und erstellen Sie 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", { /* ... */ });

Dies schafft ein Bündel in shoelace-dir. Bewegen Sie es in den Ordner public für das nächste. Ein Knotenskript verwaltet dies und erstellt ein Modul, das den Bündel -Dateinamen exportiert:

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`,
      },
    },
  },
});

und ein entsprechendes NPM -Skript:

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

Skriptladen

Im nächsten.js _document.js importieren Sie den Bündelpfad und fügen Sie dem <script></script>: ein

-Tag hinzu

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

Dies stellt sicher, dass die Registrierung der Webkomponenten vor dem ersten HTML -Rendering ausgeführt wird.

Leistungsoptimierung: Caching

Hinzufügen von Caching -Headern zur nächsten.js -Konfiguration, um die nachfolgenden Seite zu verbessern:

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

Dieser nutzt Browser effektiv.

Schlussfolgerung

Während diese Methode manuelle Schritte erfordert, bietet sie eine Problemumgehung für die aktuellen Einschränkungen von Webkomponenten und SSR. Die Vorteile von Framework-Agnostic-Komponenten und einfacher Experimentieren mit neuen Rahmenbedingungen überwiegen die anfängliche Implementierungskomplexität. Zukünftige Verbesserungen der SSR -Unterstützung von Webkomponenten werden diesen Prozess wahrscheinlich vereinfachen.

Das obige ist der detaillierte Inhalt vonVerwenden von Webkomponenten mit dem nächsten (oder einem SSR -Framework). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!