Server Components در Nuxt

مقدمه

Server Components در Nuxt قابلیتی نسبتاً جدید هستند که با الهام از React Server Components معرفی شده‌اند. هدف اصلی این قابلیت، کاهش بار پردازشی سمت کلاینت و بهبود عملکرد کلی اپلیکیشن است. از نظر ظاهری، این کامپوننت‌ها تفاوتی با کامپوننت‌های معمولی Vue ندارند، اما تفاوت اصلی آن‌ها در محل اجراست.

Server Componentها به‌طور کامل در سمت سرور رندر می‌شوند و خروجی آن‌ها تنها یک سند HTML است که به مرورگر ارسال می‌شود. در این فرآیند، هیچ کد JavaScript مربوط به خود کامپوننت به کلاینت فرستاده نمی‌شود. برخلاف کامپوننت‌های سنتی Vue که در مرورگر اجرا شده و نیاز به Hydration دارند، Server Componentها هرگز در سمت کلاینت اجرا نمی‌شوند. همین موضوع باعث می‌شود زمان بارگذاری اولیه کاهش پیدا کند و تجربه کاربری بهتری، به‌ویژه در پروژه‌های داده‌محور و سئو محور، فراهم شود.

Server Components چگونه کار می‌کنند؟

در Nuxt، زمانی که یک Server Component ایجاد می‌کنیم، فریم‌ورک در پشت صحنه از کامپوننت <NuxtIsland> استفاده می‌کند. Nuxt این کامپوننت را به‌صورت خودکار wrap می‌کند تا امکان رندر کامل آن در سمت سرور فراهم شود.

کامپوننت <NuxtIsland> دو قابلیت مهم در اختیار ما قرار می‌دهد:

• ویژگی lazy
  این ویژگی باعث می‌شود رندر کامپوننت به‌صورت non-blocking انجام شود و فرآیند رندر آن مانع نمایش سایر بخش‌های صفحه نشود.
• اسلات fallback
  در صورتی که رندر کامپوننت با تأخیر یا خطا مواجه شود، می‌توان محتوایی جایگزین برای نمایش موقت به کاربر تعریف کرد.

در برخی سناریوها، ممکن است بخشی از یک Server Component نیاز به تعامل در سمت کلاینت داشته باشد. Nuxt برای این موارد قابلیتی به نام هیدریشن جزئی (Partial Hydration) ارائه می‌دهد. با استفاده از پراپرتی nuxt-client می‌توان مشخص کرد که تنها همان بخش تعاملی در مرورگر هیدراته شود و نه کل کامپوننت.

فعال‌سازی Server Components در Nuxt

برای استفاده از Server Components، ابتدا باید این قابلیت آزمایشی را در تنظیمات پروژه فعال کنیم.

فعال‌سازی در فایل nuxt.config.ts

export default defineNuxtConfig({
	experimental: {
		componentIslands: true,
	},
});

نام‌گذاری فایل کامپوننت

برای تعریف یک Server Component کافی است پسوند فایل را به شکل زیر تغییر دهیم:

MyComponent.server.vue

Nuxt به‌صورت خودکار این فایل را شناسایی کرده و آن را فقط در سمت سرور رندر می‌کند.

مزایای استفاده از Server Components

1. کاهش بار JavaScript در سمت کلاینت

   با رندر شدن بخشی از صفحه در سمت سرور، کدهای اضافی JavaScript به مرورگر ارسال نمی‌شوند. این موضوع باعث کاهش حجم bundle و بهبود زمان بارگذاری اولیه صفحه می‌شود.

2. دریافت و پردازش کارآمد داده‌ها

   Server Componentها می‌توانند داده‌ها را مستقیماً روی سرور دریافت و پردازش کنند. در نتیجه، بسیاری از درخواست‌های غیرضروری API از سمت کلاینت حذف شده و معماری اپلیکیشن ساده‌تر می‌شود.

3. افزایش سرعت و بهبود SEO

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

4. امنیت بالاتر

   منطق‌های حساس، دسترسی به پایگاه داده و کلیدهای API فقط در سمت سرور اجرا می‌شوند و هرگز به کلاینت ارسال نمی‌شوند. این موضوع ریسک افشای اطلاعات حساس را به شکل قابل توجهی کاهش می‌دهد.

5. بهینه‌سازی برای محتوای استاتیک

   صفحاتی مانند بلاگ‌ها، مستندات و صفحات معرفی که تعامل پیچیده‌ای ندارند، گزینه‌ای ایده‌آل برای Server Componentها هستند. این کار باعث کاهش مصرف منابع در سمت کلاینت و افزایش سرعت پاسخ‌دهی می‌شود.

6. مدیریت بهتر منابع در اپلیکیشن‌های هیبریدی

   در اپلیکیشن‌هایی که ترکیبی از محتوای استاتیک و پویا دارند، می‌توان از Server Componentها برای بخش‌های غیرتعاملی و از Client Componentها برای بخش‌های تعاملی استفاده کرد و به یک معماری متعادل و بهینه رسید.

موارد استفاده از Server Components

• صفحات و بخش‌های استاتیک: زمانی که محتوای صفحه ثابت است و نیازی به تعامل فوری ندارد.
• پردازش‌های سنگین یا داده‌های حساس: زمانی که منطق پیچیده یا دسترسی به منابع خصوصی وجود دارد.
• پروژه‌های سئو محور: رندر سمت سرور تضمین می‌کند محتوای صفحه کاملاً قابل ایندکس باشد.
• کاهش زمان بارگذاری اولیه: نمایش سریع محتوای غیرتعاملی به کاربر.
• ترکیب با Lazy Hydration: فعال‌سازی تعامل فقط در زمانی که کاربر به آن نیاز دارد.
• تجمیع APIها در سمت سرور: کاهش تعداد درخواست‌های کلاینت و بهبود عملکرد کلی اپلیکیشن.

اشتباهات رایج در استفاده از Server Components

استفاده از قابلیت‌های سمت کلاینت: Server Componentها به APIهای مرورگر مانند window و document دسترسی ندارند. بنابراین استفاده از composableهایی مانند useState، useRouter، useFetch یا useAsyncData بدون درک تفاوت محیط اجرا می‌تواند باعث بروز خطا شود.

دریافت داده در جای نامناسب: استفاده نادرست از useFetch یا useAsyncData در Server Componentها، بدون شناخت نحوه عملکرد آن‌ها، ممکن است منجر به رفتارهای غیرمنتظره شود.

تغییر state در Server Componentها: Server Componentها state را بین درخواست‌ها نگه نمی‌دارند. هر درخواست جدید یک نمونه تازه از کامپوننت ایجاد می‌کند و state قبلی از بین می‌رود.

استفاده نادرست از async / await: فراموش کردن استفاده از await در فراخوانی‌های ناهمگام می‌تواند باعث شود داده‌ها پیش از تکمیل رندر آماده نباشند و خروجی ناقص نمایش داده شود.

استفاده بیش از حد از Server Components: تبدیل همه کامپوننت‌ها به Server Component می‌تواند تعامل‌پذیری اپلیکیشن را محدود کند. رویکرد پیشنهادی این است که:

• از Server Componentها برای محتوای ایستا و غیرتعاملی استفاده شود
• از Client Componentها برای بخش‌های پویا مانند فرم‌ها، دکمه‌ها و انیمیشن‌ها استفاده شود

جمع‌بندی

Server Components در Nuxt ابزاری قدرتمند برای بهبود عملکرد، امنیت و سئو هستند. با این حال، استفاده مؤثر از آن‌ها نیازمند درک درست از محدودیت‌ها و موارد استفاده است. اگر Server Componentها و Client Componentها به‌درستی در کنار هم استفاده شوند، می‌توان اپلیکیشن‌هایی سریع‌تر، امن‌تر و مقیاس‌پذیرتر توسعه داد.