React 18 مؤلفه سرور در عمق فرو رفتن

ek3nk4r 2023-05-22

0 54 خواندن این مطلب 7 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

React Server Components (RSC) یک ویژگی امیدوارکننده است که می تواند تأثیر قابل توجهی بر عملکرد بارگذاری صفحه، اندازه بسته و نحوه نوشتن برنامه های React داشته باشد. این ویژگی هنوز در React 18 آزمایشی است، اما ارزش درک نحوه عملکرد آن در زیر کاپوت را دارد.

فهرست مطالب

جداسازی اجزای سرور و مشتری

نموداری که قوانین مربوط به اجزای سرور و کلاینت را نشان می دهد

React Server Components به سرور و کلاینت (مرورگر) اجازه می دهد تا با هم کار کنند تا برنامه React شما را ارائه دهند. برخی از اجزای درخت عنصر React توسط سرور و برخی دیگر توسط مرورگر رندر می شوند. این همان رندر سمت سرور (SSR) نیست. SSR محیطی را برای رندر کردن درخت React به HTML خام شبیه‌سازی می‌کند، اما بین مؤلفه‌های سرور و کلاینت تمایزی قائل نمی‌شود.

تیم React اجزای سرور و کلاینت را بر اساس پسوند فایلی که کامپوننت در آن نوشته شده است تعریف کرده است: اگر فایل به .server.jsx ختم شود، حاوی اجزای سرور است. اگر به .client.jsx ختم شود، شامل اجزای کلاینت است. اگر به هیچکدام ختم نمی شود، حاوی اجزایی است که می توانند هم به عنوان مؤلفه های سرور و هم به عنوان مؤلفه مشتری استفاده شوند.

زندگی یک رندر RSC

عمر صفحه ای که از RSC استفاده می کند همیشه در سرور و در پاسخ به فراخوانی API برای ارائه کامپوننت React شروع می شود. سپس سرور عنصر مؤلفه ریشه را به JSON سریال می کند. هدف نهایی در اینجا این است که مؤلفه سرور ریشه اولیه را به درختی از تگ‌های HTML اساسی و متغیرهای مؤلفه کلاینت تبدیل کنیم.

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

RSC و تعلیق

تعلیق نقش مهمی در RSC ایفا می کند. Suspense به شما این امکان را می دهد تا زمانی که کامپوننت های React خود به چیزی که هنوز آماده نیست (واکشی داده ها، وارد کردن تنبلی کامپوننت ها و غیره) نیاز دارند، وعده هایی را از آنها پرتاب کنید. این وعده ها در مرز تعلیق گرفته می شوند. هنگامی که یک وعده از رندر کردن یک زیردرخت Suspense پرتاب می شود، React رندر آن زیردرخت را تا زمانی که وعده حل شود متوقف می کند و سپس دوباره تلاش می کند.

فرمت سیم RSC

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

مصرف فرمت RSC

این react-server-dom-webpack بسته حاوی نقاط ورودی است که پاسخ RSC را می گیرند و درخت عنصر React را بازسازی می کنند. هنگامی که سرور بارگذاری داده ها را به پایان می رساند، ردیف هایی را برای مرجع ماژول – که مرجع ماژول را به کامپوننت تعریف می کند – و درخت عنصر React را که باید در جایی که مرجع است جابجا شود، خروجی می دهد.

RSC در مقابل واکشی داده‌ها از مؤلفه‌های مشتری

اینکه آیا RSC بهتر از واکشی داده‌ها از مؤلفه‌های کلاینت است یا خیر، بستگی به آنچه در صفحه نمایش می‌دهید دارد. با RSC، داده‌های غیرعادی‌شده و «پردازش‌شده» دریافت می‌کنید که مستقیماً به آنچه که به کاربر نشان می‌دهید نگاشت می‌شوند. اگر رندر به چندین واکشی داده نیاز دارد که در یک آبشار به یکدیگر وابسته هستند، بهتر است واکشی را روی سرور انجام دهید – جایی که تأخیر داده ها بسیار کمتر است – تا از مرورگر.

RSC و SSR

با React 18، ترکیب هر دو SSR و RSC امکان پذیر است، بنابراین می توانید HTML را روی سرور ایجاد کنید و سپس آن HTML را با RSC در مرورگر هیدراته کنید.

رندر سمت سرور (SSR)

رندر سمت سرور (SSR) تکنیکی است که در آن یک برنامه React بر روی سرور به یک رشته HTML ایستا رندر می‌شود و سپس برای مشتری ارسال می‌شود. این می تواند عملکرد و SEO را با اجازه دادن به صفحه نمایش قبل از بارگیری و تجزیه تمام جاوا اسکریپت بهبود بخشد.

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const server = express();

server.get('/', (req, res) => {
  const appString = ReactDOMServer.renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${appString}</div>
        <script src="https://dev.to/bundle.js"></script>
      </body>
    </html>
  `);
});

server.listen(8080);

در این مثال، کامپوننت App به یک رشته در سرور رندر می شود و آن رشته در پاسخ HTML درج می شود. سپس مشتری این HTML ایستا را به یک برنامه کاملا تعاملی React “هیدراته” می کند.

اجزای سرور React (RSC)

React Server Components (RSC) به سرور و کلاینت اجازه می دهد تا با هم کار کنند تا یک برنامه React را ارائه دهند. برخی از کامپوننت ها بر روی سرور و برخی دیگر بر روی مشتری ارائه می شوند. این می تواند با کاهش مقدار جاوا اسکریپت ارسال شده به مشتری و اجازه دادن به سرور برای واکشی و ارائه مستقیم داده ها، عملکرد را بهبود بخشد.

در اینجا یک مثال ساده از RSC آورده شده است:

// Message.server.js

import {db} from './db.server';

function Message({id}) {
  const message = db.messages.get(id);
  return (
    <div>
      <h1>{message.title}</h1>
      <p>{message.body}</p>
    </div>
  );
}

export default Message;

// App.client.js

import {useState} from 'react';
import Message from './Message.server';

function App() {
  const [selectedId, setSelectedId] = useState(1);
  return (
    <div>
      <button onClick={() => setSelectedId(selectedId + 1)}>
        Next
      </button>
      <Message id={selectedId} />
    </div>
  );
}

export default App;

در این مثال، جزء سرور پیام، پیامی را بر اساس یک id prop بازیابی و ارائه می‌کند. مؤلفه سرویس گیرنده App یک بخش از حالت (selectedId) را حفظ می کند و مؤلفه سرور پیام را با شناسه فعلی ارائه می دهد.

توصیه های عملی

تفاوت بین اجزای سرور و مشتری را درک کنید: درک اینکه کدام مؤلفه ها توسط سرور ارائه می شوند و کدام مؤلفه ها توسط مشتری ارائه می شوند برای استفاده مؤثر از RSC بسیار مهم است.
از Suspense با RSC استفاده کنید: Suspense به شما این امکان را می‌دهد که در کامپوننت‌های React خود به وعده‌ها رسیدگی کنید، که در عملکرد RSC یکپارچه است.
بهینه سازی برای عملکرد: RSC می تواند عملکرد بارگذاری صفحه را به طور قابل توجهی بهبود بخشد و اندازه بسته را کاهش دهد. با این حال، اندازه گیری و نظارت بر این معیارها برای اطمینان از دریافت مزایای مورد انتظار بسیار مهم است.
معاوضه ها را در نظر بگیرید: در حالی که RSC مزایای بسیاری را ارائه می دهد، با معاوضه هایی نیز همراه است. برای مثال، اجزای سرور نمی‌توانند از حالت‌ها یا افکت‌ها استفاده کنند، که می‌تواند استفاده از آنها را در سناریوهای خاصی محدود کند.
با RSC در بخش های غیر حیاتی برنامه خود آزمایش کنید: با توجه به ماهیت آزمایشی RSC، ممکن است ایده خوبی باشد که آزمایش آن را در بخش های غیر بحرانی برنامه خود شروع کنید. این به شما درک بهتری از نحوه کارکرد و نحوه استفاده موثر از آن می دهد.
RSC را با سایر ویژگی های React ترکیب کنید: RSC را می توان با سایر ویژگی های React مانند Suspense و Concurrent Mode ترکیب کرد تا برنامه های کارآمدتر و کاربر پسندتری ایجاد کند.

مثال ها.

بیایید به چند نمونه کد نگاه کنیم تا نحوه عملکرد React Server Components (RSC) را نشان دهیم.

ابتدا اجازه دهید یک جزء سرور را تعریف کنیم. اجزای سرور با پسوند .server.js شناسایی می شوند:

// Message.server.js

import {db} from './db.server';

function Message({id}) {
  const message = db.messages.get(id);
  return (
    <div>
      <h1>{message.title}</h1>
      <p>{message.body}</p>
    </div>
  );
}

export default Message;

در این مثال، پیام یک مؤلفه سرور است که پیامی را از پایگاه داده بر اساس یک id prop دریافت می کند. توجه داشته باشید که ما به طور مستقیم یک ماژول سرور (db.server) را وارد می کنیم و از آن برای واکشی داده ها استفاده می کنیم. شما نمی توانید این کار را در کامپوننت مشتری انجام دهید.

در مرحله بعد، بیایید یک مؤلفه مشتری را تعریف کنیم که از این مؤلفه سرور استفاده می کند:

// App.client.js

import {useState} from 'react';
import Message from './Message.server';

function App() {
  const [selectedId, setSelectedId] = useState(1);
  return (
    <div>
      <button onClick={() => setSelectedId(selectedId + 1)}>
        Next
      </button>
      <Message id={selectedId} />
    </div>
  );
}

export default App;

در این مثال، App یک مؤلفه مشتری است که یک بخش از حالت (selectedId) را حفظ می کند و مؤلفه سرور پیام را با شناسه فعلی ارائه می دهد. وقتی دکمه Next کلیک می‌شود، Id انتخاب شده افزایش می‌یابد و باعث می‌شود که مؤلفه Message دوباره با شناسه جدید رندر شود.

این یک مثال ساده است، اما ایده کلیدی پشت RSC را نشان می‌دهد: اجزای سرور را می‌توان برای واکشی و رندر داده‌ها روی سرور استفاده کرد، در حالی که اجزای کلاینت تعامل را روی مشتری حفظ می‌کنند.

مقایسه

در حالی که SSR و RSC هر دو شامل رندر روی سرور هستند، اهداف متفاوتی را دنبال می‌کنند و معاوضه‌های متفاوتی دارند:

SSR در درجه اول به بهبود عملکرد و SEO از طریق ارسال HTML ایستا به مشتری می پردازد. با این حال، نیاز به ارسال تمام جاوا اسکریپت به مشتری دارد که می تواند بزرگ و کند تجزیه شود.
از سوی دیگر، RSC به سرور و کلاینت اجازه می دهد تا در رندرینگ با یکدیگر همکاری کنند، که می تواند میزان جاوا اسکریپت ارسال شده به مشتری را کاهش دهد و عملکرد را بهبود بخشد. با این حال، اجزای سرور نمی توانند از حالت ها یا افکت ها استفاده کنند، که می تواند استفاده از آنها را در سناریوهای خاص محدود کند.
به طور خلاصه، SSR و RSC هر دو تکنیک های قدرتمندی برای ارائه برنامه های React هستند که هر کدام نقاط قوت و معاوضه خاص خود را دارند. درک این تفاوت ها می تواند به شما کمک کند تا تصمیمات آگاهانه تری در مورد تکنیک هایی که در پروژه های خود استفاده کنید، بگیرید.

پیوندها:
https://react.dev/blog/2022/03/29/react-v18
https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components
https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
https://shopify.github.io/hydrogen-v1/tutorials/react-server-components
https://www.plasmic.app/blog/how-react-server-components-work