کامپوننت های کلاینت

کامپوننت های کلاینت به شما این امکان را می دهد تا رابط کاربری تعاملی بنویسید که در سرور پیش رندر شده (opens in a new tab) است و می تواند از جاوا اسکریپت کلاینت برای اجرا در مرورگر استفاده کند.

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

مزایای رندرینگ کلاینت

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

• تعامل Interactivity: کامپوننت های کلاینت می توانند از state، effects و event listeners استفاده کنند، به این معنی که می توانند بازخورد فوری به کاربر ارائه دهند و رابط کاربری را به روز کنند.
• دسترسی به API های مرورگر (Browser APIs): کامپوننت های کلاینت به API های مرورگر مانند geolocation (opens in a new tab) یا localStorage (opens in a new tab) دسترسی دارند.

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

برای استفاده از کامپوننت های کلاینت، می توانید دستورالعمل "use client" directive (opens in a new tab) React را در بالای یک فایل، بالاتر از واردات خود اضافه کنید.

"use client" برای اعلام مرز boundary بین ماژول های کامپوننت سرور و کلاینت استفاده می شود. این بدان معناست که با تعریف "use client" در یک فایل، تمام ماژول های وارد شده به آن، از جمله کامپوننت های فرزند، بخشی از باندل کلاینت در نظر گرفته می شوند.

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
	const [count, setCount] = useState(0)
 
	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
		</div>
	)
}

نمودار زیر نشان می دهد که استفاده از onClick و useState در یک کامپوننت تو در تو (toggle.js) در صورت عدم تعریف دستورالعمل "use client" باعث ایجاد خطا می شود. این به این دلیل است که به طور پیش فرض، همه کامپوننت ها در App Router، کامپوننت های سرور هستند که این API ها در آنها در دسترس نیستند. با تعریف دستورالعمل "use client" در toggle.js، می توانید به React بگویید که وارد مرز کلاینت شود که این API ها در آنجا در دسترس هستند.

تعریف چندین نقطه ورود use client:

شما می توانید چندین نقطه ورود "use client" را در درخت کامپوننت React خود تعریف کنید. این به شما امکان می دهد برنامه خود را به چندین باندل کلاینت تقسیم کنید.

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

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

در Next.js، کامپوننت های کلاینت بسته به اینکه درخواست بخشی از بارگذاری کامل صفحه (بازدید اولیه از برنامه شما یا بارگذاری مجدد صفحه ناشی از رفرش مرورگر) یا پیمایش بعدی باشد، به صورت متفاوتی رندر می شوند.

بارگذاری کامل صفحه

برای بهینه سازی بارگذاری اولیه صفحه، Next.js از API های React برای رندر یک پیش نمایش HTML استاتیک در سرور برای هر دو کامپوننت کلاینت و سرور استفاده می کند. این بدان معنی است که زمانی که کاربر برای اولین بار از برنامه شما بازدید می کند، بلافاصله محتوای صفحه را بدون نیاز به انتظار برای دانلود، تجزیه و اجرای بسته جاوا اسکریپت کامپوننت کلاینت توسط مرورگر مشاهده می کند.

در سرور:

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) کردن کامپوننت های کلاینت و تعاملی کردن رابط کاربری آنها استفاده می شود.

hydration چیست؟

هیدرات فرآیند اتصال event listeners به DOM برای تعاملی کردن HTML ایستا است. در پس زمینه، هیدرات با استفاده از API hydrateRoot (opens in a new tab) React انجام می شود.

پیمایش های بعدی

در پیمایش های بعدی، کامپوننت های کلاینت به طور کامل در کلاینت بدون HTML رندر شده توسط سرور رندر می شوند.

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

بازگشت به محیط سرور Server Environment

گاهی اوقات، پس از اعلام مرز "use client"، ممکن است بخواهید به محیط سرور بازگردید. به عنوان مثال، ممکن است بخواهید اندازه بسته کلاینت را کاهش دهید، داده ها را در سرور دریافت کنید یا از API استفاده کنید که فقط در سرور در دسترس است.

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