استفاده از اجزای سرور React: آینده برنامه های React

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

اجزای سرور React چیست؟

React Server Component ها اجزایی هستند که به طور کامل بر روی سرور ارائه می شوند. برخلاف کامپوننت‌های سنتی React که بر روی کلاینت رندر می‌شوند، کامپوننت‌های سرور به شما اجازه می‌دهند تا وظایف رندرینگ را به سرور بارگذاری کنید. این مقدار کد جاوا اسکریپت را که باید به مشتری ارسال شود کاهش می دهد و می تواند عملکرد را به میزان قابل توجهی بهبود بخشد.

چرا از اجزای سرور در React استفاده کنیم؟

1. زمان بارگذاری سریعتر: از آنجایی که React Server Component ها بر روی سرور ارائه می شوند، بارگذاری اولیه صفحه می تواند سریعتر باشد زیرا جاوا اسکریپت کمتری برای مشتری ارسال می شود.

2. اندازه بسته های کوچکتر: با بارگذاری برخی از مؤلفه‌ها در سرور، اندازه بسته جاوا اسکریپت سمت سرویس گیرنده کاهش می‌یابد که منجر به ارائه سریع‌تر صفحه و عملکرد بهتر در دستگاه‌های پایین‌تر می‌شود.

3. بهبود سئو: از آنجایی که کامپوننت‌های سرور بر روی سرور ارائه می‌شوند، می‌توانند توسط موتورهای جستجو راحت‌تر از مؤلفه‌های ارائه‌شده توسط کلاینت ایندکس شوند که منجر به سئوی بهتر برای برنامه شما می‌شود.

4. تجربه کاربری بهتر: رندر سمت سرور (SSR) با اطمینان از اینکه محتوا در اسرع وقت در دسترس است، حتی قبل از بارگیری کامل بسته جاوا اسکریپت، تجربه کلی کاربر را بهبود می بخشد.

اجزای سرور React چگونه کار می کنند؟

اجزای سرور با اجازه دادن به React برای ارائه کامپوننت ها بر روی سرور کار می کنند و در عین حال مزایای معماری مبتنی بر کامپوننت را ارائه می دهند. کامپوننت‌ها سریال‌سازی می‌شوند و به‌صورت HTML برای مشتری ارسال می‌شوند، که سپس می‌تواند با React سمت کلاینت هیدراته شود تا صفحه تعاملی شود.

1. رندر سمت سرور: اجزای سرور درست مانند رندر سمت سرور معمولی بر روی سرور ارائه می شوند. تفاوت اصلی این است که اجزای سرور شامل جاوا اسکریپت سمت کلاینت نیستند، و آنها را سبک و سریع می کند.
2. داده های جریانی: React Server Components می‌تواند داده‌ها را از سرور واکشی کرده و آن‌ها را برای مشتری پخش کند و زمان لازم برای نمایش محتوا در صفحه را کاهش دهد.

استفاده از React Server Components

برای استفاده از React Server Components، باید پروژه Next.js را راه‌اندازی کنید، زیرا Next.js از این ویژگی پشتیبانی اولیه دارد.

1. راه اندازی Next.js:

• ابتدا یک پروژه Next.js ایجاد کنید:

npx create-next-app@latest my-app
cd my-app

2. وابستگی های آزمایشی را نصب کنید:

• بسته های آزمایشی لازم را نصب کنید:

npm install react-server-dom-webpack react-dom@experimental

3. یک مؤلفه سرور ایجاد کنید:

• با افزودن قلاب استفاده سرور، یک جزء سرور ایجاد کنید.

// app/products.js
'use server'

export async function Products() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return (
    

      {products.map(product => (
        
{product.name}
      ))}
    
  );
}

4. جزء سرور جریان:

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

'use server'

export async function StreamProducts() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return (
    

      {products.map(product => (
        
{product.name}
      ))}
    
  );
}

5. رندر در Next.js:

• از اجزای سرور در صفحه Next.js استفاده کنید:

import { Products } from './products';

export default function Home() {
  return (
    
  );
}

نتیجه گیری
React Server Components یک راه قدرتمند جدید برای ساخت برنامه‌های React سریع و کارآمد با رندر کردن مؤلفه‌ها در سرور ارائه می‌دهد. آنها به کاهش اندازه بسته‌های جاوا اسکریپت، بهبود زمان بارگذاری و ارائه SEO بهتر کمک می‌کنند. همانطور که این ویژگی بالغ می شود، انتظار می رود که به بخش کلیدی توسعه React، به ویژه برای برنامه های کاربردی در مقیاس بزرگ تبدیل شود.