رابط کاربری بارگیری و استریمینگ

فایل‌ مخصوص loading.js به شما کمک می‌کند تا با استفاده از React Suspense (opens in a new tab)، رابط کاربری بارگیری معناداری ایجاد کنید. با این قرارداد، می‌توانید در حین بارگیری محتوای یک بخش مسیر، از سرور یک حالت بارگیری لحظه ای نمایش دهید. محتوای جدید به طور خودکار پس از تکمیل رندر، جایگزین می‌شود.

حالت‌های بارگیری لحظه‌ای

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

با اضافه کردن یک فایل loading.js داخل یک پوشه، یک حالت بارگیری ایجاد کنید.

export default function Loading() {
	// You can add any UI inside Loading, including a Skeleton.
	return <LoadingSkeleton />
}

در همان پوشه، loading.js درون layout.js تو در تو قرار خواهد گرفت. این به طور خودکار فایل page.js و هر زیرمجموعه آن را درون یک محدوده <Suspense> می‌پیچاند.

خوب است بدانید:

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

توصیه: از قرارداد loading.js برای بخش‌های مسیر (طرح بندی ها و صفحات) استفاده کنید زیرا Next.js این قابلیت را بهینه می‌کند.

استریمینگ با Suspense

علاوه بر loading.js، شما همچنین می توانید به صورت دستی برای کامپوننت های رابط کاربری خود، محدوده های Suspense (opens in a new tab) ایجاد کنید. روتر برنامه از استریمینگ با Suspense برای هر دو محیط اجرای Node.js و Edge پشتیبانی می کند.

خوب است بدانید:

• برخی مرورگرها (opens in a new tab) پاسخ های استریم شده را بافر می کنند. ممکن است پاسخ استریم شده را تا زمانی که پاسخ از 1024 بایت تجاوز نکند، مشاهده نکنید. این معمولا فقط برنامه های "سلام دنیا" را تحت تاثیر قرار می دهد، نه برنامه های واقعی.

استریمینگ چیست؟

درک Streaming نیازمند درک Server-Side Rendering (SSR) و محدودیت های آن است.

با SSR، مجموعه‌ای از مراحل وجود دارد که قبل از اینکه کاربر بتواند صفحه‌ای را ببیند و با آن تعامل کند، باید تکمیل شود:

1. ابتدا تمام داده های مربوط به یک صفحه خاص در سرور دریافت می شود.
2. سپس سرور HTML صفحه را رندر می کند.
3. HTML، CSS و جاوا اسکریپت صفحه به کلاینت ارسال می شود.
4. با استفاده از HTML و CSS تولید شده، یک رابط کاربری غیر تعاملی نمایش داده می شود.
5. در نهایت، React رابط کاربری را برای تعاملی کردن آن هیدراته (opens in a new tab) می کند.

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

SSR با React و Next.js به بهبود عملکرد درک شده بارگیری با نمایش هر چه سریعتر یک صفحه غیر تعاملی به کاربر کمک می کند.

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

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

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

استریمینگ به خوبی با مدل کامپوننت React کار می کند زیرا هر کامپوننت را می توان یک بخش در نظر گرفت. کامپوننت هایی که اولویت بالاتری دارند (مانند اطلاعات محصول) یا به داده وابسته نیستند (مانند طرح بندی) می توانند اول ارسال شوند و React می تواند هیدراتاسیون را زودتر شروع کند. کامپوننت هایی که اولویت کمتری دارند (مانند بررسی ها، محصولات مرتبط) را می توان بعد از دریافت داده هایشان در همان درخواست سرور ارسال کرد.

استریمینگ به ویژه زمانی مفید است که می خواهید از درخواست های داده طولانی که مانع رندر شدن صفحه می شوند جلوگیری کنید زیرا می تواند زمان رسیدن به اولین بایت Time To First Byte (TTFB) (opens in a new tab) و اولین رنگ محتوا First Contentful Paint (FCP) (opens in a new tab) را کاهش دهد. همچنین به بهبود زمان تعاملی Time to Interactive (TTI) (opens in a new tab) ، به ویژه در دستگاه های کندتر کمک می کند.

مثال

<Suspense> با پوشش دادن کامپوننتی که یک عملیات ناهمزمان (مانند دریافت داده) را انجام می دهد، نمایش رابط کاربری جایگزین (مانند اسکلت، اسپینر) در حین انجام کار و سپس جایگزینی کامپوننت شما پس از تکمیل عملیات کار می کند.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
	return (
		<section>
			<Suspense fallback={<p>Loading feed...</p>}>
				<PostFeed />
			</Suspense>
			<Suspense fallback={<p>Loading weather...</p>}>
				<Weather />
			</Suspense>
		</section>
	)
}

با استفاده از Suspense، از مزایای زیر بهره مند می شوید:

1. رندر استریمینگ سمت سرور - رندر تدریجی HTML از سرور به کلاینت.
2. هیدراتاسیون انتخابی - React بر اساس تعامل کاربر، اولویت می دهد که کدام کامپوننت ها را ابتدا تعاملی کند.

برای مثال های بیشتر و موارد استفاده Suspense، لطفاً به مستندات React (opens in a new tab) مراجعه کنید.

بهینه سازی موتورهای جستجو SEO

• Next.js قبل از استریم کردن رابط کاربری به کاربر، منتظر تکمیل فرایند دریافت داده داخل generateMetadata می ماند. این کار تضمین می‌کند که اولین قسمت از یک پاسخ استریم شده شامل تگ های <head> باشد.
• از آنجایی که استریمینگ با رندر سمت سرور انجام می شود، بر سئو تأثیری نمی گذارد. می توانید از ابزار تست نتایج غنی (Rich Results Test (opens in a new tab)) از گوگل برای مشاهده چگونگی نمایش صفحه شما به خزنده های وب گوگل و مشاهده HTML سریال شده (منبع (opens in a new tab)) استفاده کنید.

کدهای وضعیت

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

سرور همچنان می تواند خطاها یا مشکلات را از طریق محتوای استریم شده به کاربر منتقل کند، به عنوان مثال، زمانی که از redirect یا notFound استفاده می شود. از آنجایی که سربرگ های پاسخ قبلاً به کاربر ارسال شده اند، کد وضعیت پاسخ قابل به روز رسانی نیست. این بر سئو تأثیر نمی گذارد.