>我以前的文章探索了Shoelace，這是一個(gè)組件庫(kù)，提供了一套全面吸引人的，可訪問(wèn)的UX組件，該組件使用Web組件構(gòu)建。 該體系結(jié)構(gòu)允許框架 - 不平衡的用法。雖然React的Web組件集成不是最佳的，但存在解決方法。

這種方法涉及手動(dòng)步驟，並且對(duì)初始頁(yè)面負(fù)載有輕微的性能影響。我們將解決績(jī)效優(yōu)化策略。 該解決方案並非沒(méi)有權(quán)衡。徹底的測(cè)試和分析至關(guān)重要。

挑戰(zhàn)：SSR和Web組件

為什麼Web組件不與SSR無(wú)縫集成？

> Web組件使它複雜化。 當(dāng)渲染像鞋帶的組件時(shí)：

React（或任何JavaScript框架）直接通過(guò)這些標(biāo)籤。 渲染邏輯位於Web組件的代碼中（在這種情況下為Shoelace）。 此代碼執(zhí)行的時(shí)間至關(guān)重要。 <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>

中添加阻止腳本。 這通常是不希望的，因?yàn)樗cSSR的目的相矛盾，但可以確保立即渲染。 緩存將減輕性能的影響。這不是理想的長(zhǎng)期解決方案。 Future Next.js DSD支持可能會(huì)消除這一需求。

>實(shí)現(xiàn)詳細(xì)信息

完整的代碼可在此GitHub存儲(chǔ)庫(kù)中可用，並使用Vercel在此處部署。該應(yīng)用程序?qū)⑿瑤ЫM件與文本一起在水合後發(fā)生變化。 文本將更新為“水合”，而鞋帶組件從一開(kāi)始就正確呈現(xiàn)。

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

）並創(chuàng)建：> 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", { /* ... */ });

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

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

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

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

以上是將Web組件與Next（或任何SSR框架）一起使用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！