کامپوننت های سرور

کامپوننت های سرور React به شما این امکان را می دهد تا رابط کاربری بنویسید که بتوان آن را در سرور رندر کرد و به صورت اختیاری در حافظه کش ذخیره کرد. در Next.js، کار رندرینگ برای فعال کردن استریمینگ و رندرینگ جزئی، بیشتر بر اساس بخش های مسیر تقسیم می شود و سه استراتژی مختلف رندرینگ سرور وجود دارد:

• رندر کردن استاتیک
• رندر کردن داینامیک
• استریمینگ

این صفحه نحوه عملکرد کامپوننت های سرور، زمان هایی که ممکن است از آنها استفاده کنید و استراتژی های مختلف رندرینگ سرور را شرح می دهد.

مزایای رندرینگ سرور

انجام کار رندرینگ در سرور چندین مزیت دارد، از جمله:

• دریافت داده (Data Fetching): کامپوننت های سرور به شما امکان می دهند دریافت داده را به سرور، نزدیکتر به منبع داده خود منتقل کنید. این می تواند با کاهش زمان لازم برای دریافت داده های مورد نیاز برای رندرینگ و تعداد درخواست هایی که کلاینت باید انجام دهد، عملکرد را بهبود بخشد.
• امنیت (Security): کامپوننت های سرور به شما امکان می دهند داده های حساس و منطق را مانند توکن ها و کلیدهای API در سرور نگه دارید، بدون اینکه خطر افشای آنها به کلاینت وجود داشته باشد.
• کش (Caching): با رندرینگ روی سرور، نتیجه را می توان در حافظه کش ذخیره کرد و در درخواست های بعدی و بین کاربران دوباره استفاده کرد. این می تواند با کاهش مقدار رندرینگ و دریافت داده انجام شده در هر درخواست، عملکرد را بهبود بخشد و هزینه را کاهش دهد.
• عملکرد (Performance): کامپوننت های سرور ابزارهای دیگری را برای شما به ارمغان می آورد تا عملکرد را از پایه بهینه کنید. به عنوان مثال، اگر با برنامه ای کاملاً از کامپوننت های کلاینت شروع کنید، انتقال بخش های غیر تعاملی رابط کاربری شما به کامپوننت های سرور می تواند میزان جاوا اسکریپت مورد نیاز طرف کلاینت را کاهش دهد. این برای کاربرانی که اینترنت کندتر یا دستگاه‌های کم‌توان‌تر دارند مفید است، زیرا مرورگر جاوا اسکریپت کلاینت‌ساید کمتری برای دانلود، تجزیه و اجرا دارد.
• بارگذاری اولیه صفحه و اولین رنگ محتوایی (First Contentful Paint - FCP) (opens in a new tab): در سرور، ما می توانیم HTML تولید کنیم تا به کاربران اجازه دهیم صفحه را بلافاصله مشاهده کنند، بدون اینکه منتظر بمانند تا کلاینت جاوا اسکریپت مورد نیاز برای رندر کردن صفحه را دانلود، تجزیه و اجرا کند.
• بهینه سازی برای موتورهای جستجو و قابلیت اشتراک گذاری در شبکه های اجتماعی (Search Engine Optimization and Social Network Shareability) : ربات های موتور جستجو می توانند از HTML رندر شده برای فهرست بندی صفحات شما و ربات های شبکه های اجتماعی برای تولید پیش نمایش کارت های اجتماعی برای صفحات شما استفاده کنند.
• استریمینگ (Streaming) : کامپوننت های سرور به شما امکان می دهند کار رندرینگ را به قطعات تقسیم کنید و آنها را به محض آماده شدن برای کلاینت ارسال کنید. این به کاربر اجازه می دهد تا بخش هایی از صفحه را زودتر ببیند بدون اینکه منتظر بماند تا کل صفحه در سرور رندر شود.

استفاده از کامپوننت های سرور در Next.js

به طور پیش فرض، Next.js از کامپوننت های سرور استفاده می کند. این به شما امکان می دهد بدون پیکربندی اضافی، رندرینگ سرور را به طور خودکار اجرا کنید و در صورت نیاز می توانید از کامپوننت های کلاینت استفاده کنید، بخش کامپوننت های کلاینت Client Components را ببینید.

چگونه کامپوننت های سرور رندر می شوند؟

در سرور، Next.js از API های React برای هماهنگ سازی رندرینگ استفاده می کند. کار رندرینگ به بخش هایی تقسیم می شود: بر اساس بخش های مسیر جداگانه و مرزهای Suspense (opens in a new tab).

هر بخش در دو مرحله رندر می شود:

1. React، کامپوننت های سرور را به یک فرمت داده ویژه به نام React Server Component Payload (RSC Payload) رندر می کند.
2. Next.js از RSC Payload و دستورالعمل های جاوا اسکریپت کامپوننت کلاینت برای رندر کردن HTML در سرور استفاده می کند.

سپس، در کلاینت :

1. از HTML برای نمایش فوری یک پیش نمایش غیر تعاملی سریع از مسیر استفاده می شود - این فقط برای بارگذاری اولیه صفحه است.
2. از React Server Components Payload برای تطبیق دادن درخت های کامپوننت کلاینت و سرور و به روز رسانی DOM استفاده می شود.
3. از دستورالعمل های جاوا اسکریپت برای hydrate (opens in a new tab) کردن کامپوننت های کلاینت و تعاملی کردن برنامه استفاده می شود.

چیست؟ React Server Component Payload (RSC Payload)

RSC Payload یک نمایش فشرده باینری از درخت رندر شده کامپوننت های سرور React است. این توسط React در کلاینت برای به روز رسانی DOM مرورگر استفاده می شود. RSC Payload شامل موارد زیر است:

• نتیجه رندر شده کامپوننت های سرور
• مکان هایی برای جایی که کامپوننت های کلاینت باید رندر شوند و رفرنس ها به فایل های جاوا اسکریپت آنها
• هر گونه prop که از یک کامپوننت سرور به یک کامپوننت کلاینت ارسال می شود.

استراتژی های رندرینگ سرور

سه زیرمجموعه از رندرینگ سرور وجود دارد: استاتیک، داینامیک و استریمینگ.

رندرینگ استاتیک (پیش فرض)

با رندرینگ استاتیک، مسیرها در زمان ساخت یا در پس زمینه پس از اعتبارسنجی مجدد داده رندر می شوند. نتیجه در حافظه کش ذخیره می شود و می تواند به یک شبکه تحویل محتوا (CDN) (opens in a new tab) ارسال شود. این بهینه‌سازی به شما امکان می‌دهد نتیجه کار رندرینگ را بین کاربران و درخواست‌های سرور به اشتراک بگذارید.

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

رندرینگ داینامیک

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

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

مسیرهای داینامیک با داده کش شده

در اکثر وب سایت ها، مسیرها کاملاً استاتیک یا کاملاً داینامیک نیستند - بلکه طیف وسیعی از آنها وجود دارد. به عنوان مثال، شما می توانید یک صفحه تجارت الکترونیک داشته باشید که از داده های محصول کش شده استفاده می کند که در یک بازه زمانی اعتبارسنجی مجدد می شود، اما همچنین دارای داده های مشتری شخصی سازی شده و بدون حافظه کش است.

در Next.js، می توانید مسیرهای رندر شده داینامیک داشته باشید که هم داده کش شده و هم بدون حافظه کش داشته باشند. این به این دلیل است که RSC Payload و داده ها به طور جداگانه در حافظه کش ذخیره می شوند. این به شما امکان می دهد بدون نگرانی در مورد تأثیر عملکرد بر گرفتن تمام داده ها در زمان درخواست، رندرینگ داینامیک را انتخاب کنید.

درباره حافظه کش مسیر کامل full-route cache و حافظه کش داده Data Cache بیشتر بیاموزید.

تغییر به رندرینگ داینامیک

در طول رندرینگ، اگر یک تابع داینامیک یا درخواست داده بدون حافظه کش کشف شود، Next.js به رندرینگ داینامیکی کل مسیر تغییر می کند. این جدول خلاصه ای از نحوه تأثیر توابع داینامیک و حافظه کش داده بر اینکه آیا یک مسیر به صورت استاتیک یا داینامیک رندر می شود، ارائه می دهد:

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

به عنوان یک توسعه دهنده، نیازی به انتخاب بین رندرینگ استاتیک و داینامیک ندارید، زیرا Next.js به طور خودکار بهترین استراتژی رندرینگ را برای هر مسیر بر اساس ویژگی ها و API های مورد استفاده انتخاب می کند. در عوض، شما انتخاب می کنید که چه زمانی داده های خاصی را در حافظه کش ذخیره یا اعتبارسنجی مجدد کنید، و ممکن است انتخاب کنید که قسمت هایی از رابط کاربری خود را استریم کنید.

توابع داینامیک

توابع داینامیک به اطلاعاتی متکی هستند که فقط در زمان درخواست قابل تشخیص هستند، مانند کوکی های کاربر، هدرهای درخواست فعلی یا پارامترهای جستجوی URL. در Next.js، این توابع داینامیک عبارتند از:

• cookies() و headers(): استفاده از این موارد در یک کامپوننت سرور کل مسیر را به رندرینگ داینامیک در زمان درخواست تبدیل می کند.
• searchParams: استفاده از prop searchParams در یک Page صفحه را به رندرینگ داینامیک در زمان درخواست تبدیل می کند.

استفاده از هر یک از این توابع کل مسیر را به رندرینگ داینامیک در زمان درخواست تبدیل می کند.

استریمینگ

استریمینگ به شما امکان می دهد رندرینگ UI را از سرور به طور تدریجی انجام دهید. کار به بخش هایی تقسیم می شود و به محض آماده شدن برای کلاینت ارسال می شود. این به کاربر اجازه می دهد تا بخش هایی از صفحه را زودتر ببیند بدون اینکه منتظر بماند تا کل محتوا در سرور رندر شود.

استریم به طور پیش فرض در روتر برنامه (App Router) Next.js تعبیه شده است. این کمک می‌کند که هم عملکرد بارگذاری اولیه صفحه بهبود یابد، و هم رابط کاربری که به داده‌هایی که باعث مسدود شدن رندر کل مسیر می‌شوند، وابسته است. مانند نقدها در یک صفحه محصول

می توانید با استفاده از loading.js و کامپوننت های رابط کاربری با React Suspense، استریمینگ بخش های مسیر را شروع کنید. برای اطلاعات بیشتر، بخش رابط کاربری بارگیری و استریمینگ را ببینید.