Bina Komponen Web Reaktif dengan SSR-tutorial js-php.cn

Bina Komponen Web Reaktif dengan SSR

WBOY

Lepaskan： 2024-08-24 11:22:06

asal

238 orang telah melayarinya

Cara tradisional penulisan Komponen Web tidak begitu mesra SSR (Server Side Rendering). Dalam siaran ini, saya menunjukkan kepada anda cara anda boleh membina Komponen Web reaktif yang berfungsi dengan SSR dan dengan mana-mana rangka kerja JavaScript (Vue, React, Svelte, Solid, Brisa) atau Vanilla JS.

Pengenalan
Menulis Komponen Web dengan Brisa
Membina Komponen Web
Memuatkan Komponen Web dalam projek Vanilla JS
SSR Komponen Web
Beritahu saya lebih lanjut tentang Brisa... Tolong...
Nota untuk pencipta pustaka Komponen Web
Contoh
Kesimpulan

pengenalan

Kami akan menggunakan Brisa Web Component Compiler. Brisa ialah rangka kerja web yang, selain serupa dengan rangka kerja lain seperti Next.js atau Nuxt.js, juga membolehkan anda membina Komponen Web reaktif yang berfungsi dengan isyarat untuk kereaktifan, dengan JSX dan dengan SSR.

Build Reactive Web Components with SSR

Logo Brisa

Untuk melakukan ini, anda hanya perlu mengetahui sintaks Brisa semasa menulis Komponen Web. Brisa belum lagi terbuka kerana pada masa ini berada di 95.48% daripada peta laluan v0.1, tetapi kami menganggarkan dalam masa 1 bulan ia akan sedia untuk dilancarkan dan semua orang akan dapat mengaksesnya. Walau bagaimanapun, walaupun ia tidak terbuka sama sekali, anda sudah boleh menggunakannya untuk mencipta perpustakaan Komponen Web anda sendiri.

Menulis Komponen Web dengan Brisa

Sebagai contoh, kami akan menulis Komponen Web bagi kaunter, seperti biasa, contoh klasik.

kaunter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    <div>
      <button onClick={() => count.value++}>+</button>
      {count.value}
      <button onClick={() => count.value--}>-</button>
    </div>
  );
}

Salin selepas log masuk

Brisa menggunakan nama fail untuk mengetahui pemilih, di sini pemilih akan menjadi counter-wc.

PETUA: Walaupun Brisa belum lagi terbuka, anda boleh menggunakan jenis TypeScript untuk membimbing anda tentang cara menulis Komponen Web.

Dalam contoh di atas, keadaan digunakan untuk mencipta isyarat dan kemudian menggunakan .value yang anda jadikan ia reaktif di dalam JSX. Alat peraga juga merupakan isyarat khas, memandangkan ia adalah baca sahaja, nilai .tidak digunakan untuk memudahkan penggunaan dan menentukan nilai lalai dengan lebih mudah, ini dilakukan melalui pengoptimuman masa binaan, sama seperti React untuk bertindak sebagai jika mereka menggunakan isyarat tetapi sebaliknya.

Templat css literal membenarkan ia bertindak balas terhadap perubahan reaktif dalam kes sifat warna ini. Templat css literal di luar contoh ini sangat berguna untuk membuat animasi reaktif dengan mudah. Adalah penting untuk diingat bahawa Komponen Web berfungsi dengan Shadow DOM, jadi CSS tidak menjejaskan seluruh halaman.

Membina Komponen Web

Untuk membina Komponen Web, anda perlu menjalankan arahan berikut:

brisa build -w counter-wc.tsx

Salin selepas log masuk

Arahan ini akan menghasilkan 2 fail:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

Salin selepas log masuk

Fail ini bukan Komponen Web, ia hanya fungsi pemaparan Komponen Web yang dioptimumkan pada masa binaan agar seringan mungkin (bait yang keluar adalah tanpa gzip).

Jadi, bagaimanakah kita hendak memuatkan Komponen Web?

Memuatkan Komponen Web dalam projek Vanilla JS

Untuk melakukan ini, anda perlu menambah importmap dalam HTML dengan brisa/client dan kemudian mengimport fail counter-wc.client.js:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brisa Web Component Example</title>
    <script type="importmap">
      {
        "imports": {
          "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
        }
      }
    </script>
    <script type="module" src="https://unpkg.com/counter-wc@latest"></script>
  </head>
  <body>
    <counter-wc start="15"></counter-wc>
  </body>
</html>

Salin selepas log masuk

Di sini hanya bahagian pemaparan akan dialihkan dalam setiap fail komponen web, manakala mereka semua akan menggunakan pembalut Brisa yang sama yang ditakrifkan dalam peta import, yang bertanggungjawab untuk mencipta Komponen Web dengan isyarat dan DOM bayangan.

SSR Komponen Web

SSR Komponen Web kini boleh dilakukan terima kasih kepada Declarative Shadow DOM. Fail counter-wc.server.js telah pun disusun dengan tingkah laku ini, jadi anda hanya perlu mengimportnya pada pelayan anda dan memaparkannya dalam HTML dan menyesuaikannya dengan rangka kerja pelayan anda.

Berikut ialah contoh dengan Bun.js atau Node.js tanpa menggunakan JSX:

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brisa Web Component Example</title>
    <script type="importmap">
    {
        "imports": {
            "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
        }
    }
    </script>
    <script type="module" src="https://unpkg.com/counter-wc@latest"></script>
    </head>
    <body>
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    </body>
</html>
`;

console.log(html);

Salin selepas log masuk

Kemudian jalankan bun run ssr.js dan anda akan melihat HTML dengan komponen web yang diberikan menggunakan DOM Bayangan Perisytiharan.

Beritahu saya lebih lanjut tentang Brisa... Tolong...

Penyepaduan perpustakaan Komponen Web ini dengan Brisa dilakukan melalui fail konfigurasi:

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

Salin selepas log masuk

Dengan cara ini, jenis SSR dan TypeScript disepadukan secara automatik ke dalam projek anda. Dan anda boleh menggunakan Komponen Web dalam mana-mana Komponen Pelayan atau dalam Komponen Web lain.

Build Reactive Web Components with SSR

Jika anda berminat untuk mengetahui lebih lanjut, saya menjemput anda untuk melanggan surat berita Brisa untuk menerima berita terkini dan kemas kini tentang Brisa. Kami menganggarkan bahawa menjelang akhir September ia akan sedia untuk dilancarkan.

Note for Web Component library creators

We encourage you to try Brisa to create your own Web Component libraries. If you put the "made with Brisa" badge, we will put a link to your library on the Brisa page.

Build Reactive Web Components with SSR

<a href="https://brisa.build" target="_blank" rel="noopener noreferrer">
  <img
    width="150"
    height="42"
    src="https://aralroca.com/images/blog-images/brisa_badge.svg"
    alt="Made with Brisa"
  />
</a>

Salin selepas log masuk

Example

If you want to see the GitHub repository of the example of the counter that we have explained in this article, you can take a look and use it as a reference for your own creations:

https://github.com/aralroca/counter-wc

Conclusion

In this post, we have seen how to build reactive Web Components that work with SSR and with any JavaScript framework or Vanilla JS. We have used Brisa to build the Web Component and we have seen how to load it in a Vanilla JS project and how to do SSR with it.

I hope you have enjoyed this post and that you have learned something new. If you have any questions, do not hesitate to ask me in the comments below. I will be happy to help you.

Happy coding and enjoy the rest of the summer! ??