در دام CDN نیفتید! 🪤

Summarize this content to 400 words in Persian Lang
این پست وبلاگ به بررسی چگونگی آن می پردازد جریان HTML Brisa این ویژگی می تواند به شما کمک کند از تله CDN اجتناب کنید و عملکرد برنامه خود را بهبود بخشد. ما همچنین Brisa را با سایر ابزارهای محبوب مانند مقایسه خواهیم کرد HTMX و واکنش نشان دهید برای برجسته کردن مزایای استفاده از Brisa برای رندر سمت سرور.

چرا جریان HTML مهم است

HTML Streaming یک تکنیک قدرتمند است که به شما امکان ارسال را می دهد HTML به صورت تدریجی از سرور به مشتری، بهبود عملکرد و کاهش تاخیر. با Brisa، می‌توانید محتوای HTML را مستقیماً برای مشتری پخش کنید، نه تنها برای رندر اولیه، بلکه برای به‌روزرسانی‌های بعدی و اقدامات سرور.

اگر برنامه شما فقط نیاز دارد 1 درخواست برای واکشی داده های سرور، در آن گیر کرده اید تله CDN. درخواست های بیشتری اضافه کنید، و در یک کابوس آبشاری قرار می گیرید. CDN ها برای دارایی ها خوب هستند – نه بیشتر. وب سایت شما فقط در صورتی دارایی است که به داده های سرور متکی نباشد.

رندرینگ اجزای موجود در سرور با جریان بهترین راه برای از تله CDN اجتناب کنید. Brisa نه تنها استفاده می کند جریان HTML برای اولین رندر بلکه به عنوان پاسخی به اقدامات سرور پس از رندر کردن کامپوننت در سرور

ممکن است تعجب کنید، اما بسیاری از کامپوننت‌ها ثابت هستند و من نمی‌خواهم آنها را همیشه روی سرور رندر کنم. خوب، بریسا به شما اجازه می دهد آنها را در زمان ساخت از قبل رندر کنید فقط با یک ویژگی، به طوری که فقط اجزای پویا ارائه می شوند روی سرور

<StaticComponent renderOn=”build” />

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

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

آیا واردات پویا تله CDN را حل می کند؟

خیر. استفاده از HTML Streaming در Server Actions دقیقاً همان مزایای استفاده از آن در اولین رندر را دارد.

تصور کنید که مدیریت کنید باز کردن و ارائه از یک گفتگو با یک واردات پویا:

فقط اگر دیالوگ به داده های سرور نیاز داشته باشد، ما در همین مشکل هستیم.

مثال کد: آزمون با جریان HTML

به عنوان مثال، ما در Brisa با استفاده از HTML Streaming از طریق Server Actions قصد داریم یک مسابقه سوالات را در Brisa بسازیم و خواهید دید که انجام آن جدا از مزایای آن چقدر آسان است.

برای انجام مسابقه، ما قصد داریم یک کامپوننت ایجاد کنیم که بر روی سرور رندر می شود و مسئولیت مدیریت پرسش و پاسخ را بر عهده خواهد داشت. سوالات از طریق HTML Streaming برای مشتری ارسال می شود و پاسخ ها در سرور پردازش می شود.

import { renderComponent } from ‘brisa/server’;

// Define the type for questions to ensure type safety.
type Question = {
answer: string; // The correct answer for the question (‘yes’ or ‘no’).
question: string; // The text of the question to be displayed.
id: number; // Unique identifier for each question.
};

// All this code is server-code. It ensures that the user cannot infer the correct
// answers by inspecting the page source or the network.
const questions: Question[] = [
{ id: 1, answer: ‘no’, question: ‘Is the Earth flat? ‘ },
{ id: 2, answer: ‘yes’, question: ‘Is the Earth round? ‘ },
{ id: 3, answer: ‘no’, question: ‘Can giraffes lay eggs?’ },
{ id: 4, answer: ‘yes’, question: ‘Can penguins fly?’ },
{ id: 5, answer: ‘no’, question: ‘Can a cow jump over the moon?’ },
{ id: 6, answer: ‘yes’, question: ‘Is water wet by definition?’ },
{ id: 7, answer: ‘yes’, question: ‘Is the sky blue?’ },
{ id: 8, answer: ‘yes’, question: ‘Do fish sleep with their eyes open?’ },
{ id: 9, answer: ‘no’, question: ‘Can a cow fly?’ },
];

// Function to open the modal with a random question.
function openModal() {
const randomIndex = Math.floor(Math.random() * questions.length);

renderComponent({
element: <Modal {…questions[randomIndex]} />,
target: ‘#content’, // Specify the DOM element where the modal should render.
});
}

// Function to process the user’s answer and display the result.
function processAnswer(e: ClickEvent, value = ‘yes’) {
// We have the event on the server, so we can access the target and the dataset!
const id = (e.target as HTMLButtonElement).dataset.id;

// Check if the user’s answer matches the correct answer.
const isCorrect = questions.find((q) => q.id === Number(id)).answer === value;

// Render feedback based on the correctness of the answer.
renderComponent({
element: isCorrect ? (
<p id=”content” class=”correct”>
Correct!
p>
) : (
<p id=”content” class=”incorrect”>
Incorrect!
p>
),
target: ‘dialog’,
});
}

// Main homepage component.
export default function Homepage() {
return (
<>
<div class=”hero”>
<h1>
<span class=”h1_addition”>Welcome to span>Brisa
h1>
<p class=”edit-note”>✏️ SSR Modal examplep>
<code>src/pages/index.tsxcode>
div>

<form onSubmit={openModal}>
<button>Open modalbutton>
<div id=”content” /> {/* Container for rendering dynamic content */}
form>
>
);
}

// Modal component to display a question and answer options.
function Modal({ question, answer, id }: Question) {
return (
<dialog open>
<form method=”dialog”>
<h2>{question}h2>
{/* Button for “Yes” answer */}
<button data-id={id} onClick={(e) => processAnswer(e, ‘yes’)}>
Yes
button>
{/* Button for “No” answer */}
<button data-id={id} onClick={(e) => processAnswer(e, ‘no’)}>
No
button>
form>
dialog>
);
}

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

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

یکی از مزایای استفاده از منطق سمت سرور برای رندر و کنترل دیالوگ، امنیت و سادگی بیشتر آن است. با Brisa، می‌توانید پردازش‌های رندر و منطقی را به سرور بارگذاری کنید و اطمینان حاصل کنید که داده‌های حیاتی برای مشتری غیرقابل دسترسی باقی می‌مانند و جداسازی دقیق نگرانی‌ها حفظ می‌شود.

در این مثال، یک گفتگوی مودال برای ارائه سوالات مسابقه تصادفی به کاربر استفاده می شود. منطق انتخاب سوال، اعتبارسنجی پاسخ و رندر کردن رابط کاربری به طور کامل در سرور مدیریت می شود. این رویکرد خطر افشای داده های حساس مانند پاسخ صحیح را در اختیار مشتری از بین می برد.

معمولاً ما مدال‌ها را با یک واردات پویا روی کلاینت بارگذاری می‌کنیم تا از بارگیری آن‌ها در ابتدا، درخواست CDN جلوگیری کنیم، و سپس اگر مدال به داده‌های سرور نیاز دارد، پس از رندر شدن باید آبشاری از تماس‌ها را با سرور برقرار کند. با Brisa، ما می‌توانیم مدال را مستقیماً از سرور بارگیری کنیم و از برقراری تماس‌های اضافی اجتناب کنیم و منطق مدال را روی سرور حفظ کنیم.

با این رویکرد، ما مزایای زیر را دریافت می کنیم:

امنیت پیشرفته: داده های حساس، مانند پاسخ های صحیح، روی سرور باقی می مانند و از دسترسی یا دستکاری غیرمجاز جلوگیری می کنند.

UX را بهبود بخشید: با رندر کردن مودال مستقیماً روی سرور با استریم، می‌توانیم از درخواست‌های شبکه اضافی جلوگیری کنیم و تجربه کاربر را به لطف استریم بهبود ببخشیم.

مدیریت دولتی ساده شده: با متمرکز کردن منطق روی سرور، کلاینت سبک وزن باقی می‌ماند و فقط بر روی رندر و تعامل کاربر تمرکز می‌کند.

کاهش پیچیدگی و اندازه سمت مشتری: بدون نیاز به کتابخانه‌های مدیریتی پیچیده یا منطق اضافی سمت مشتری برای مدیریت مدال. سرور همه چیز را مدیریت می کند و شما می توانید یک SPA را بدون افزایش اندازه بسته نرم افزاری مشتری انجام دهید.

SPA بدون جاوا اسکریپت سمت مشتری؟

بله، شما می توانید! اگرچه ما از نوشتن کامپوننت های وب با آن پشتیبانی می کنیم JSX و سیگنال ها با کد بسیار کم (3 کیلوبایت)، می خواهیم از آنها استفاده کنید فقط برای خالص تعاملات مشتری. ما هدف ایجاد امکان پذیر است آبگرم بدون نیاز به جاوا اسکریپت سمت کلاینت.

تصور کنید که شما تجارت الکترونیک سایت، به جای داشتن یک آبشار از درخواست ها و بسیاری از کد جاوا اسکریپت سمت کلاینت که آسیب می رساند عملکرد و تجربه کاربری، تبدیل به a می شود آبگرم بدون جاوا اسکریپت سمت کلاینت، زیرا بیشتر تعاملاتی که به داده های سرور نیاز دارند می توانند انجام شوند به طور مستقیم بر روی سرور مدیریت می شود.

رندر روی سرور بسیار است ارزان و سریع (~ 10 میلی ثانیه)!

ارزان و سریع

تکه های جریان را با Async Generators کنترل کنید

Brisa به شما اجازه می دهد تا کنترل کنید تکه های جریان با ژنراتورهای Async. به این ترتیب، شما می توانید جریان را HTML در تکه ها و کنترل کنید را جریان از جریان.

import { Database } from “bun:sqlite”;
import { renderComponent } from “brisa/server”;

export default function LoadMovies() {
function streamMovies() {
renderComponent({
element: <MovieItems />,
target: “ul”,
placement: “append”,
});
}

return (
<>
<button id=”movies” onClick={streamMovies}>
Click here to stream movies from a Server Action
button>
<ul />
>
)
}

const db = new Database(“db.sqlite”);

async function* MovieItems() {
for (const movie of db.query(“SELECT title, year FROM movies”)) {
yield (
<li>
{movie.title} ({movie.year})
li>
);
}
}

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

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

در این مثال، ما از یک استفاده می کنیم Async Generator به جریان فیلم های الف پایگاه داده SQLite. هر yield یک تکه از جریان است که برای مشتری ارسال می شود.

چیست renderComponent?

بریسا renderComponent به توسعه دهندگان اجازه می دهد:

مولفه ها را به صورت پویا در عملکردهای سرور رندر کنید.

مولفه های خاص را به مکان های خاص ارائه دهید در DOM

نحوه و مکان قرار دادن آنها را انتخاب کنید (به عنوان مثال، جایگزین، الحاق، قبل، بعد و قبل).

افزایش انتقال با View Transition API.

جریان اجزای JSX به صورت تدریجی از سرور

در اینجا یک نگاه سریع وجود دارد:

export default function MyComponent({ text = “foo” }: { text: string }) {
function handleClick() {
// Re-render the same component
renderComponent();

// Re-render with new props
renderComponent({ element: <MyComponent text=”bar” /> });

// Render another Component to a specific location
renderComponent({
element: <AnotherComponent />,
target: “#target-id”,
placement: “append”,
withTransition: true, // Enhance transitions with the View Transition API
});
}

return (
<div>
<button onClick={handleClick}>{text}button>
div>
);
}

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

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

همه این کدها کدهای سمت سرور هستند. در Brisa، تمام رویدادها از اجزای سرور، اقدامات سرور هستند.

چرا این یک تغییر دهنده بازی است؟

رویکرد Brisa به اقدامات سرور از مدل React و مفاهیم HTMX الهام گرفته شده است، اما به گونه ای طراحی شده است که ساده تر و ذاتا امن تر باشد.

پاک کردن در مقابل HTMX

HTMX به توسعه دهندگان اجازه می دهد تا به صورت پویا بخش هایی از DOM را از طریق پاسخ های سرور به روز کنند. اما فاقد:

دانه بندی در سطح مؤلفه: HTMX بر پاره های HTML تولید شده توسط سرور بدون مفهوم اجزاء متکی است.

پشتیبانی از جریان: HTMX بطور بومی از به روز رسانی های جریانی برای مشتری پشتیبانی نمی کند.

اندازه بسته: HTMX یک کتابخانه 14 کیلوبایتی است، در حالی که Brisa تنها 2 کیلوبایت است.

با renderComponent، دریافت می کنید:

استفاده مجدد از مولفه: اجزای Brisa به طور یکپارچه دوباره رندر می شوند و از ترکیب JSX و React مانند استفاده می کنند.

قرارگیری پویا: اجزای موجود در DOM را به‌روزرسانی یا اضافه کنید.

پشتیبانی از جریان: با استفاده از جریان های سمت سرور، داده ها را به صورت تدریجی ارسال و رندر کنید.

بریسا در مقابل واکنش

در واکنش نشان دهید، پیاده سازی اقدامات سرور اغلب شامل استفاده می شود “use server” و “use client” بخشنامه ها این مدل دوگانه پتانسیل خطای انسانی را معرفی می‌کند و می‌تواند به طور ناخواسته مؤلفه‌ها را در معرض دید مشتری قرار دهد.

متمایز کننده های کلیدی عبارتند از:

پشتیبانی از جریان HTML: React با ارسال جاوا اسکریپت بین سرور و کلاینت ارتباط برقرار می کند که می تواند سربار قابل توجهی را اضافه کند. برعکس، Brisa HTML را مستقیماً برای مشتری پخش می کند و پیچیدگی را کاهش می دهد و عملکرد را بهبود می بخشد.

سیگنال ها – واکنش ریز دانه: سیگنال های سمت کلاینت Brisa به طور خودکار به تغییرات سمت سرور با به روز رسانی کامپوننت های وب واکنش نشان می دهند و از نیاز به رندر مجدد کامل اجتناب می کنند.

اندازه بسته: React-DOM نسخه 19 حدود 200 کیلوبایت وزن دارد، در حالی که Brisa دارای ردپایی بسیار سبک وزن تنها 2 کیلوبایت است.

به روز رسانی های انتخابی: Brisa به شما اجازه می دهد تا اجزای خاصی را در سرور به روز کنید و نیاز به بارگذاری مجدد تمام صفحه را کاهش دهید.

نتیجه گیری

Brisa's HTML Streaming از تله CDN جلوگیری می کند و عملکرد برنامه شما را بهبود می بخشد. می‌توانید محتوای HTML را مستقیماً برای رندر اولیه، به‌روزرسانی‌های بعدی و اقدامات سرور به مشتری پخش کنید. این رویکرد امنیت و تجربه کاربر را بهبود می بخشد و مدیریت حالت را ساده می کند و آن را به گزینه ای ایده آل برای رندر سمت سرور تبدیل می کند.

اگر به دنبال ساخت برنامه های وب سریع، ایمن و مقیاس پذیر هستید، امروز Brisa را امتحان کنید!

از ما حمایت کنید: برای خرید سواگ بریسا از فروشگاه ما دیدن کنید! 🛍️

<StaticComponent renderOn="build" />

import { renderComponent } from 'brisa/server';

// Define the type for questions to ensure type safety.
type Question = {
  answer: string; // The correct answer for the question ('yes' or 'no').
  question: string; // The text of the question to be displayed.
  id: number; // Unique identifier for each question.
};

// All this code is server-code. It ensures that the user cannot infer the correct
// answers by inspecting the page source or the network.
const questions: Question[] = [
  { id: 1, answer: 'no', question: 'Is the Earth flat? ' },
  { id: 2, answer: 'yes', question: 'Is the Earth round? ' },
  { id: 3, answer: 'no', question: 'Can giraffes lay eggs?' },
  { id: 4, answer: 'yes', question: 'Can penguins fly?' },
  { id: 5, answer: 'no', question: 'Can a cow jump over the moon?' },
  { id: 6, answer: 'yes', question: 'Is water wet by definition?' },
  { id: 7, answer: 'yes', question: 'Is the sky blue?' },
  { id: 8, answer: 'yes', question: 'Do fish sleep with their eyes open?' },
  { id: 9, answer: 'no', question: 'Can a cow fly?' },
];

// Function to open the modal with a random question.
function openModal() {
  const randomIndex = Math.floor(Math.random() * questions.length);

  renderComponent({
    element: <Modal {...questions[randomIndex]} />,
    target: '#content', // Specify the DOM element where the modal should render.
  });
}

// Function to process the user’s answer and display the result.
function processAnswer(e: ClickEvent, value = 'yes') {
  // We have the event on the server, so we can access the target and the dataset!
  const id = (e.target as HTMLButtonElement).dataset.id;

  // Check if the user's answer matches the correct answer.
  const isCorrect = questions.find((q) => q.id === Number(id)).answer === value;

  // Render feedback based on the correctness of the answer.
  renderComponent({
    element: isCorrect ? (
      <p id="content" class="correct">
        Correct!
      p>
    ) : (
      <p id="content" class="incorrect">
        Incorrect!
      p>
    ),
    target: 'dialog',
  });
}

// Main homepage component.
export default function Homepage() {
  return (
    <>
      <div class="hero">
        <h1>
          <span class="h1_addition">Welcome to span>Brisa
        h1>
        <p class="edit-note">✏️ SSR Modal examplep>
        <code>src/pages/index.tsxcode>
      div>

      <form onSubmit={openModal}>
        <button>Open modalbutton>
        <div id="content" /> {/* Container for rendering dynamic content */}
      form>
    >
  );
}

// Modal component to display a question and answer options.
function Modal({ question, answer, id }: Question) {
  return (
    <dialog open>
      <form method="dialog">
        <h2>{question}h2>
        {/* Button for "Yes" answer */}
        <button data-id={id} onClick={(e) => processAnswer(e, 'yes')}>
          Yes
        button>
        {/* Button for "No" answer */}
        <button data-id={id} onClick={(e) => processAnswer(e, 'no')}>
          No
        button>
      form>
    dialog>
  );
}

import { Database } from "bun:sqlite";
import { renderComponent } from "brisa/server";

export default function LoadMovies() {
  function streamMovies() {
    renderComponent({
      element: <MovieItems />,
      target: "ul",
      placement: "append",
    });
  }

  return (
    <>
      <button id="movies" onClick={streamMovies}>
        Click here to stream movies from a Server Action
      button>
      <ul />
    >
  )
}

const db = new Database("db.sqlite");

async function* MovieItems() {
  for (const movie of db.query("SELECT title, year FROM movies")) {
    yield (
      <li>
        {movie.title} ({movie.year})
      li>
    );
  }
}

export default function MyComponent({ text = "foo" }: { text: string }) {
  function handleClick() {
    // Re-render the same component
    renderComponent();

    // Re-render with new props
    renderComponent({ element: <MyComponent text="bar" /> });

    // Render another Component to a specific location
    renderComponent({
      element: <AnotherComponent />,
      target: "#target-id",
      placement: "append",
      withTransition: true, // Enhance transitions with the View Transition API
    });
  }

  return (
    <div>
      <button onClick={handleClick}>{text}button>
    div>
  );
}