Next.js 14: مؤلفه های سرور و مؤلفه های سرویس گیرنده توضیح داده شده است

سلام به همه سلام و رحمت و برکات خداوند بر شما باد

Next.js 14 سنت ارائه مولفه های سرور و مولفه های مشتری را ادامه می دهد و به شما امکان می دهد برنامه های کاربردی وب و تعاملی بسازید. در اینجا به تفصیل این مفاهیم می پردازیم:

اجزای سرور

• اجرا: در طول درخواست اولیه به طور انحصاری روی سرور اجرا شود.
• تفسیر: رندر سمت سرور (SSR) HTML از پیش رندر شده ارسال شده به مرورگر را تولید می کند.
• فواید:
  • بار اولیه سریعتر: عملکرد درک شده را با ارائه HTML از پیش ساخته شده، ایده آل برای SEO، بهبود می بخشد.
  • واکشی داده ها: می تواند به طور مستقیم به منابع داده سمت سرور برای تولید محتوا دسترسی داشته باشد.
  • اندازه باندل کاهش یافته: کد به مشتری ارسال نمی شود، و دانلود اولیه جاوا اسکریپت را به حداقل می رساند.
• اشکالاتی:
  • تعامل محدود: متکی به درخواست های بعدی برای تعاملات کاربر است که به طور بالقوه بر پاسخگویی تأثیر می گذارد.

اجزای مشتری

• اجرا: با استفاده از جاوا اسکریپت در سمت مشتری (مرورگر) اجرا کنید.
• تفسیر: پس از دریافت کد جاوا اسکریپت از سرور توسط مرورگر مدیریت می شود.
• فواید:
  • تعامل غنی: به روز رسانی های پویا و تعاملات کاربر در مرورگر را فعال می کند.
  • عملکرد آفلاین: به طور بالقوه می تواند با اتصال اینترنت محدود (بسته به اجرا) کار کند.
  • بار سرور کوچکتر: با مدیریت تعاملات روی مشتری، بار کاری سرور را کاهش می دهد.
• اشکالاتی:
  • بار اولیه کندتر: مرورگر باید قبل از رندر، جاوا اسکریپت را دانلود و تجزیه کند، که احتمالاً بر زمان رندر اولیه تأثیر می گذارد.
  • دسترسی محدود به داده ها: دسترسی مستقیم به منابع داده سمت سرور محدود شده است.

انتخاب بین اجزای سرور و مشتری

• رفتار پیش فرض: Next.js به طور پیش‌فرض از اجزای سرور استفاده می‌کند و تعادلی بین عملکرد و مزایای SEO ارائه می‌دهد.
• انتخاب اجزای مشتری: استفاده کنید use client دستورالعمل انتخاب کردن اجزای مشتری این برای عناصر بسیار تعاملی یا کسانی که نیاز به دسترسی به APIهای مرورگر دارند ایده آل است.

Next.js 14 بهبود

در حالی که مفاهیم اصلی یکسان باقی می‌مانند، Next.js 14 برخی ویژگی‌های هیجان‌انگیز را معرفی می‌کند که بر مؤلفه‌های سرور و مشتری تأثیر می‌گذارد:

• توربو پک: این سرور توسعه اختیاری به طور قابل توجهی عملکرد ساخت را بهبود می بخشد و با سرعت بخشیدن به تکرار توسعه، از اجزای سرور و مشتری سود می برد.
• اقدامات سرور: اکنون در Next.js 14 پایدار است، اکشن‌های سرور راه قدرتمندی برای واکشی داده‌ها و مدیریت جهش‌ها بر روی سرور فراهم می‌کند و در عین حال پیشرفت‌های پیشرونده را ارائه می‌دهد (پردازش استاتیک اولیه و به‌روزرسانی‌های پویا). این را می توان با اجزای سرور و مشتری برای بهبود مدیریت داده ها استفاده کرد.
• پیش اجرا جزئی (تجربی): این ویژگی آزمایشی امکان ترکیبی از تولید سایت ایستا (SSG) و SSR را فراهم می کند. شما می توانید محتوای اولیه یک صفحه را از قبل اجرا کنید و در عین حال قطعات پویا را برای رندر سمت سرور حفظ کنید. این می‌تواند عملکرد را برای سناریوهای خاص شامل اجزای سرور و کلاینت بهینه کند.

مثال: وبلاگ با مولفه های سرور و مشتری

• لیست پست ها (مولفه سرور): صفحه ای که لیستی از پست های وبلاگ را نمایش می دهد می تواند یک جزء سرور برای بارگذاری اولیه سریع باشد. داده ها را بر روی سرور واکشی می کند و HTML از پیش ساخته شده را ارائه می کند.
• دکمه لایک (مولفه مشتری): یک دکمه لایک برای هر پست به عنوان یک جزء مشتری مفید خواهد بود. با کلیک بر روی دکمه یک به‌روزرسانی سمت سرویس گیرنده (مانند تغییر وضعیت) و احتمالاً یک عملکرد سرور برای به‌روزرسانی تعداد موارد مشابه در سرور ایجاد می‌شود.

به طور خلاصه

با درک اجزای سرور و سرویس گیرنده در Next.js 14، می توانید برنامه های کاربردی وب و تعاملی بسازید. از ویژگی‌های Next.js 14 مانند Turbopack و اقدامات سرور برای بهبود تجربه توسعه و مدیریت داده استفاده کنید. به خاطر داشته باشید که برای آخرین جزئیات پیاده سازی در مورد ویژگی هایی مانند پیش اجرا جزئی، به اسناد رسمی Next.js مراجعه کنید.