ساخت اجزای وب واکنش پذیر با SSR

Summarize this content to 400 words in Persian Lang
روش سنتی نوشتن کامپوننت‌های وب چندان سازگار با SSR (رندر سمت سرور) نیست. در این پست، من به شما نشان می دهم که چگونه می توانید اجزای وب واکنشی بسازید که با SSR و با هر چارچوب جاوا اسکریپت (Vue، React، Svelte، Solid، Brisa) یا Vanilla JS کار می کنند.

مقدمه

ما قصد داریم از Brisa Web Component Compiler استفاده کنیم. Brisa یک چارچوب وب است که علاوه بر مشابه بودن با سایر فریم ورک‌ها مانند Next.js یا Nuxt.js، به شما امکان می‌دهد تا کامپوننت‌های وب واکنش‌پذیری بسازید که با سیگنال‌های واکنش‌پذیری، با JSX و با SSR کار می‌کنند.

آرم نسیم

برای انجام این کار، فقط باید سینتکس Brisa را هنگام نوشتن Web Components بدانید. Brisa هنوز عمومی نیست همانطور که در حال حاضر است 95.48٪ از نقشه مسیر v0.1، اما تخمین می زنیم که تا 1 ماه دیگر آماده راه اندازی خواهد شد و همه می توانند به آن دسترسی داشته باشند. با این حال، حتی اگر اصلاً عمومی نباشد، می‌توانید از آن برای ایجاد کتابخانه‌های Web Components خود استفاده کنید.

نوشتن یک کامپوننت وب با Brisa

به عنوان مثال، ما می‌خواهیم یک Web Component از یک شمارنده بنویسیم، مثل همیشه، مثال کلاسیک.

counter-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>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Brisa از نام فایل ها برای شناخت انتخابگر استفاده می کند، در اینجا انتخابگر خواهد بود counter-wc.

نکته: اگرچه Brisa هنوز عمومی نیست، می توانید از انواع TypeScript برای راهنمایی در مورد نحوه نوشتن کامپوننت های وب استفاده کنید.

در مثال بالا، state برای ایجاد سیگنال و سپس استفاده از .value شما آن را در داخل JSX واکنش نشان می دهید. پایه ها همچنین سیگنال های خاصی هستند، زیرا آنها فقط خواندنی هستند .value برای آسان‌تر کردن استفاده و تعریف آسان‌تر مقادیر پیش‌فرض استفاده نمی‌شود، این کار از طریق بهینه‌سازی‌های زمان ساخت انجام می‌شود، شبیه به React تا طوری عمل کنند که انگار از سیگنال‌ها استفاده می‌کنند اما برعکس.

این css template literal به آن اجازه می دهد تا به تغییرات واکنشی در این مورد از واکنش نشان دهد color دارایی این css الگوی واقعی خارج از این مثال برای ساخت انیمیشن های واکنشی به راحتی بسیار مفید است. مهم است که به یاد داشته باشید که Web Component ها با Shadow DOM کار می کنند، بنابراین CSS بر بقیه صفحه تأثیر نمی گذارد.

ساخت کامپوننت وب

برای ساخت Web Component باید دستور زیر را اجرا کنید:

brisa build -w counter-wc.tsx

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور 2 فایل تولید می کند:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این فایل‌ها جزء Web نیستند، فقط عملکرد رندر کامپوننت وب هستند که در زمان ساخت بهینه شده است تا تا حد امکان سبک باشند. (بایت هایی که بیرون می آیند بدون gzip هستند).

بنابراین، چگونه کامپوننت وب را بارگیری کنیم؟

بارگیری کامپوننت وب در پروژه Vanilla JS

برای این کار باید importmap را در HTML با اضافه کنید brisa/client و سپس وارد کنید counter-wc.client.js فایل:

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
Brisa Web Component Example
type=]]>”importmap”>
{
“imports”: {
“brisa/client”: “https://unpkg.com/brisa@latest/client-simplified/index.js”
}
}

type=]]>”module” src=”https://unpkg.com/counter-wc@latest”>

start=”15″>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا فقط بخش رندر در هر فایل کامپوننت وب پورت می‌شود، در حالی که همگی از همان بریسا wrapper تعریف‌شده در importmap استفاده می‌کنند، که مسئول ایجاد Web Component با سیگنال‌ها و سایه DOM است.

SSR کامپوننت وب

SSR یک کامپوننت وب اکنون به لطف Shadow DOM اعلامی قابل انجام است. این counter-wc.server.js فایل قبلاً با این رفتار کامپایل شده است، بنابراین شما فقط باید آن را روی سرور خود وارد کنید و در HTML رندر کنید و آن را با چارچوب سرور خود تطبیق دهید.

در اینجا یک مثال با Bun.js یا Node.js بدون استفاده از JSX آورده شده است:

ssr.js

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

const html = `

Brisa Web Component Example

${await renderToString(jsx(CustomCounter, { start: 10 }))}

`;

console.log(html);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس اجرا کنید bun run ssr.js و HTML را با کامپوننت وب رندر شده با استفاده از Declarative Shadow DOM خواهید دید.

در مورد بریسا بیشتر توضیح بده… لطفا…

ادغام این کتابخانه های مؤلفه وب با Brisa از طریق یک فایل پیکربندی انجام می شود:

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;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به این ترتیب، انواع SSR و TypeScript به طور خودکار در پروژه شما ادغام می شوند. و می توانید از Web Component در هر کامپوننت سرور یا در داخل کامپوننت وب دیگر استفاده کنید.

اگر علاقه مند به دانستن بیشتر هستید، از شما دعوت می کنم با عضویت در خبرنامه بریسا آخرین اخبار و به روز رسانی های بریسا را ​​دریافت کنید. ما تخمین می زنیم که تا پایان سپتامبر آماده راه اندازی خواهد شد.

یادداشت برای سازندگان کتابخانه کامپوننت وب

ما شما را تشویق می کنیم که Brisa را برای ایجاد کتابخانه های Web Component خود امتحان کنید. اگر نشان «ساخته شده با بریسا» را قرار دهید، پیوندی به کتابخانه شما در صفحه بریسا قرار می دهیم.

مثال

اگر می‌خواهید مخزن GitHub نمونه شمارنده‌ای را که در این مقاله توضیح داده‌ایم ببینید، می‌توانید نگاهی بیندازید و از آن به عنوان مرجعی برای خلاقیت‌های خود استفاده کنید:

نتیجه گیری

در این پست، نحوه ساخت کامپوننت های وب واکنشی را دیدیم که با SSR و با هر فریم ورک جاوا اسکریپت یا Vanilla JS کار می کنند. ما از Brisa برای ساختن Web Component استفاده کرده‌ایم و نحوه بارگذاری آن را در پروژه Vanilla JS و نحوه انجام SSR با آن را دیده‌ایم.

امیدوارم از این پست لذت برده باشید و چیز جدیدی یاد گرفته باشید. اگر سوالی دارید، در نظرات زیر از من بپرسید. من خوشحال خواهم شد که به شما کمک کنم.

کدنویسی مبارک و از بقیه تابستان لذت ببرید! 🌞🌴

از بقیه تابستان لذت ببرید!

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

brisa build -w counter-wc.tsx

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

 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />