次の（または任意のSSRフレームワーク）を使用してWebコンポーネントを使用する

私の前の記事は、Webコンポーネントを使用して構築された視覚的に魅力的でアクセス可能なUXコンポーネントの包括的なセットを提供するコンポーネントライブラリであるShoelaceを調査しました。 このアーキテクチャにより、フレームワークに依存しない使用が可能になります。 ReactのWebコンポーネントの統合は最適ではありませんが、回避策は存在します

Webコンポーネントの大きな制限は、現在のサーバー側のレンダリング（SSR）サポートの欠如です。 宣言的なシャドウDOM（DSD）は開発中ですが、現在のサポートは限られており、サーバー側の変更が必要です。 この分野での継続的なnext.js開発は有望です。 この記事では、現在の手法を使用して、next.jsを含むSSRフレームワーク内のWebコンポーネントの管理に焦点を当てています。

このアプローチには、手動の手順と初期ページの負荷にわずかなパフォーマンスの影響が含まれます。パフォーマンスの最適化戦略に対処します。 このソリューションはトレードオフがないわけではありません。徹底的なテストとプロファイリングが非常に重要です。

課題：SSRおよびWebコンポーネント

なぜWebコンポーネントがSSRとシームレスに統合しないのか？

next.jsプロセス反応コードのようなフレームワーク、コンポーネントをプレーンHTMLに変換します。 Reactコンポーネントツリーはサーバー上でレンダリングされ、このHTMLはクライアントブラウザーに送信されます。 このHTMLに加えて、タグロードReactとコンポーネントコードがあります。 ブラウザはコンポーネントツリーを再レンダリングし、サーバーレンダリングのHTMLと一致させます。 水分補給として知られるこのプロセスは、効果、イベントハンドラー、および状態管理を活性化し、アプリケーションをインタラクティブにします。

Webコンポーネントはこれを複雑にします。 Shoelace's

：

のようなコンポーネントをレンダリングするとき

React（または任意のJavaScriptフレームワーク）は、これらのタグを直接渡します。 レンダリングロジックは、Webコンポーネントのコード（この場合はShoelace）内に存在します。 このコード実行のタイミングは重要です。

<sl-tab-group></sl-tab-group>通常、Webコンポーネントの登録は、水分補給中のJavaScriptのインポートを介して発生します。 これは、水分補給後までコンポーネントが正しくレンダリングされず、非スタイルのコンテンツ（FOUC）のフラッシュにつながることを意味します。 理論的にはプレースホルダーマークアップを追加できますが、特にサードパーティライブラリでは実用的ではありません。

hydration Pre-Hydration Webコンポーネント登録

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

問題は、水分補給までWebコンポーネント登録コードの遅延実行です。 私たちのソリューションでは、このコードを早めに実行することが含まれます。 Webコンポーネントコードをカスタムバンドルし、ブロックスクリプトをドキュメントの

に追加します。 これは、SSRの目的と矛盾するため、一般的に望ましくありませんが、即時のレンダリングを保証します。 パフォーマンスの影響は、キャッシュによって軽減されます。これは理想的な長期的なソリューションではありません。 Future Next.JS DSDサポートは、このニーズを排除する可能性があります

実装の詳細

完全なコードはこのGitHubリポジトリで利用でき、Vercelを使用してここに展開されます。このアプリケーションは、水分補給後に変化するテキストとともに靴棚コンポー​​ネントをレンダリングします。 テキストは「Hydlated」に更新され、Shoelaceコンポーネントは最初から正しくレンダリングされます。

カスタムバンドリング

最初に、すべてのWebコンポーネント定義をインポートするJavaScriptモジュールを作成します。靴ひもの場合：

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

このモジュール

は直接インポートできません。通常のJavaScriptバンドルに含めるのを防ぐために、カスタムバンドルする必要があります。 Viteを使用します。それをインストール（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", { /* ... */ });

これにより、shoelace-dirでバンドルが作成されます。 next.jsサービングのために、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`,
      },
    },
  },
});

および対応するNPMスクリプト：

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

スクリプトの読み込み

next.jsの_document.jsで、バンドルパスをインポートし、<script></script>：：

にタグを追加します

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

これにより、最初のHTMLレンダリングの前にWebコンポーネントの登録が実行されることが保証されます。

パフォーマンスの最適化：キャッシング

キャッシングヘッダーをNext.js構成に追加して、後続のページのロードを改善します：

これにより、ブラウザのキャッシングを効果的に活用しています。

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

結論

この方法では手動の手順が必要ですが、WebコンポーネントとSSRの現在の制限の回避策を提供します。 フレームワークに依存しないコンポーネントの利点と、新しいフレームワークを使用した簡単な実験は、初期の実装の複雑さを上回ります。 WebコンポーネントのSSRサポートの将来の改善は、このプロセスを簡素化する可能性があります。

以上が次の（または任意のSSRフレームワーク）を使用してWebコンポーネントを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。