Menggunakan komponen web dengan seterusnya (atau rangka kerja SSR)

artikel saya sebelum ini Explored Shoelace, perpustakaan komponen yang menawarkan satu set komprehensif yang menarik, komponen UX yang boleh diakses dengan menggunakan komponen web. Senibina ini membolehkan penggunaan kerangka-agnostik. Walaupun integrasi komponen web React tidak optimum, penyelesaiannya wujud.

Batasan komponen Web yang ketara adalah kekurangan sokongan pelayan-pelayan (SSR) semasa mereka. Deklaratif Shadow Dom (DSD) sedang dibangunkan, tetapi sokongan semasa adalah terhad dan memerlukan pengubahsuaian sisi pelayan. Pembangunan Next.js yang berterusan di kawasan ini menjanjikan. Artikel ini memberi tumpuan kepada menguruskan komponen web dalam rangka kerja SSR, termasuk Next.js, menggunakan teknik semasa.

Pendekatan ini melibatkan langkah -langkah manual dan sedikit kesan prestasi pada beban halaman awal. Kami akan menangani strategi pengoptimuman prestasi. Penyelesaian ini bukan tanpa perdagangan; Ujian dan profil menyeluruh adalah penting.

Cabaran: SSR dan Komponen Web

Mengapa komponen web tidak diintegrasikan dengan lancar dengan SSR?

rangka kerja seperti Kod React Process Next.js, menukar komponen ke HTML biasa. Pokok komponen React menjadikan pelayan, dan HTML ini dihantar kepada penyemak imbas klien. Bersama -sama dengan HTML ini adalah tag memuatkan reaksi dan kod komponen. Penyemak imbas semula melengkapkan pokok komponen, yang sepadan dengan HTML yang diberikan pelayan. Proses ini, yang dikenali sebagai penghidratan, mengaktifkan kesan, pengendali acara, dan pengurusan negeri, menjadikan aplikasi interaktif.

Komponen web merumitkan ini. Semasa memberikan komponen seperti 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 (atau mana -mana rangka kerja JavaScript) meluluskan tag ini secara langsung. Logik rendering berada dalam kod komponen web (dalam kes ini, kasut). Masa pelaksanaan kod ini adalah kritikal.

Biasanya, pendaftaran komponen web berlaku melalui import JavaScript semasa penghidratan. Ini bermakna komponen tidak akan diberikan dengan betul sehingga selepas penghidratan, yang membawa kepada kilauan kandungan yang tidak terkawal (fouc). Walaupun anda secara teorinya boleh menambah markup pemegang tempat, ia tidak praktikal, terutamanya dengan perpustakaan pihak ketiga.

Pendaftaran Komponen Web Pra-Hidrasi

Isu ialah pelaksanaan kod pendaftaran komponen web yang ditangguhkan sehingga penghidratan. Penyelesaian kami melibatkan menjalankan kod ini lebih awal -segera. Kami akan mengetepikan kod komponen web dan menambah skrip menyekat ke

dokumen. Ini umumnya tidak diingini, kerana ia bercanggah dengan tujuan SSR, tetapi ia memastikan rendering segera. Kesan prestasi akan dikurangkan dengan caching. Ini bukan penyelesaian jangka panjang yang ideal. Sokongan DSD Next.js masa depan mungkin akan menghapuskan keperluan ini. Butiran pelaksanaan

Kod Lengkap boleh didapati di repositori GitHub ini dan digunakan di sini menggunakan Vercel. Aplikasi ini menjadikan komponen kasut bersama teks yang berubah selepas penghidratan. Teks akan dikemas kini kepada "terhidrasi," sementara komponen kasut diberikan dengan betul dari awal.

bundling custom

Pertama, buat modul JavaScript yang mengimport semua definisi komponen web. Untuk kasut:

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

Modul ini tidak boleh diimport secara langsung; Ia mesti dibentuk khas untuk mengelakkan kemasukan dalam berkas JavaScript biasa. Saya akan menggunakan Vite. Pasangnya () dan buat 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", { /* ... */ });

Ini mewujudkan satu bundle dalam

. Gerakkannya ke folder shoelace-dir untuk berkhidmat next.js. Skrip nod menguruskan ini dan mencipta modul yang mengeksport nama fail 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`,
      },
    },
  },
});

dan skrip NPM yang sepadan:

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

Loading Script

di Next.js's

, import laluan bundle dan tambahkan tag _document.js ke <script></script>:

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

Ini memastikan pendaftaran komponen web berjalan sebelum rendering HTML awal.

Pengoptimuman Prestasi: Caching

Tambah tajuk caching ke konfigurasi seterusnya.js untuk meningkatkan beban halaman berikutnya:

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

ini memanfaatkan caching penyemak imbas dengan berkesan.

Kesimpulan

Walaupun kaedah ini memerlukan langkah -langkah manual, ia menyediakan penyelesaian untuk batasan semasa komponen web dan SSR. Manfaat kerangka komponen-agnostik dan percubaan yang lebih mudah dengan rangka baru melebihi kerumitan pelaksanaan awal. Penambahbaikan masa depan dalam sokongan SSR komponen web mungkin akan memudahkan proses ini.

Atas ialah kandungan terperinci Menggunakan komponen web dengan seterusnya (atau rangka kerja SSR). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!