چرا ابتدا بهینه سازی ترکیب فایل و پوشه برای اجزای سرور را توصیه می کنم!

با Next.JS به تازگی نسخه 15 را اعلام کرده و به سرعت در حال تکامل است ، اجزای سرور به یک تمرکز اصلی تبدیل شده اند. پارادایم های جدید و پیشرفته و پیشرفتهای مسیریابی ، فشار چارچوب را به سمت رندر سمت سرور (SSR) به عنوان رویکرد پیش فرض تقویت می کند. برای پیگیری این تغییرات ، من در حالی که مدیریت عملکرد طرف مشتری را به طور جداگانه مدیریت می کنم ، ذهنیت “اجزای سرور را ابتدا” اتخاذ کرده ام. به همین دلیل است که من معتقدم که این رویکرد باید تیم های بیشتری را به همراه دستورالعمل های عملی برای ساختار پروژه های بعدی انجام دهد.

Mindset: مؤلفه های سرور ابتدا

از اجزای سرور تأکید می شود که به توسعه دهندگان اجازه می دهد تا از SSR کاملاً بهره بگیرند و در عین حال انعطاف پذیری سمت مشتری را نیز ارائه دهند. به طور پیش فرض ، فرض این است که تمام صفحات با ارائه سرور ، سودمند خواهند بود:

• عملکرد: بارگذاری رندر به سرور میزان JavaScript را که روی مشتری اجرا می شود ، کاهش می دهد و منجر به بار سریعتر بار و تجربه کاربر نرم تر می شود.
• واکشی داده ها: داده ها را مستقیماً در مؤلفه های سرور با استفاده از Fetch Standard و Async/Await قرار دهید. این رویکرد بدون نیاز به تنظیمات پیچیده ، از SSR استفاده می کند ، و به سرور اجازه می دهد تا ضمن سبک نگه داشتن سبک مشتری ، وزنه برداری سنگین را انجام دهد.
• SEO: صفحات ارائه شده با سرور HTML کاملاً پرجمعیت را به خزنده های موتور جستجو ، بهبود نمایه سازی و تقویت رتبه بندی موتور جستجو ارائه می دهد.

کنترل عملکرد طرف مشتری به طور جداگانه

تعامل سمت مشتری برای برخی از ویژگی های خاص ، مانند دست زدن به فرم ، انیمیشن ها یا مدیریت پویا دولت بسیار مهم است. با استفاده از Next.js ، می توانید این کار را با استفاده از دستورالعمل “استفاده از مشتری” مدیریت کنید ، که اعلام می کند که یک جزء باید در سمت مشتری ارائه شود. در اینجا نحوه ساختار این موضوع آورده شده است:

• عملکرد مشتری را در مؤلفه های جداگانه جدا کنید: پرونده های فردی را برای مؤلفه های خاص مشتری ایجاد کنید و دستورالعمل “استفاده از مشتری” را در بالا قرار دهید.
• الگوهای ترکیب اهرم برای مدیریت پیچیدگی: از الگوهای ترکیب شرح داده شده در مستندات بعدی استفاده کنید. این تضمین می کند که مؤلفه های مشتری فقط در صورت لزوم معرفی می شوند.

به عنوان مثال ، صفحه ای را در نظر بگیرید که شامل یک لیست ارائه شده سرور است اما به یک فیلتر سمت مشتری نیز نیاز دارد:

• page.tsx: این مؤلفه سرور برای ارائه لیست است.
• ProductFilter.tsx: یک مؤلفه مشتری با 'use client' دستورالعمل برای مدیریت تعامل فیلتر.

اگر نیازهای خاص سرور وجود نداشته باشد ، چه می شود؟

هنگامی که رندر سمت سرور لازم نیست ، می توانید دستورالعمل “استفاده از مشتری” را مستقیماً به پرونده page.tsx اضافه کنید. این رویکرد برای سناریوهایی که محتوای یک صفحه از پیش نمایش در سرور ، مانند داشبورد یا فرم های صرفاً تعاملی ، سودمند نیست ، مناسب است.

ساختار پروژه بعدی خود. js در نسخه 14+

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

app/
  ├─ products/
  │   ├─ page.tsx                 // Server component for rendering the product list & imports ProductList.tsx
  │   ├─ ProductList.tsx          // Client page with 'use client' directive & imports ProductFilter.tsx
  │   ├─ ProductFilter.tsx        // Client component with 'use client' directive
  ├─ checkout/
  │   ├─ page.tsx                 // 'use client' directive if entirely client-side

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

داده های واکشی در Next.js

روش جدید استراتژی برای انتقال داده ها شامل موارد زیر است:

• با استفاده از fetch مستقیماً در اجزای سرور: عملیات واگذاری داده ها در داخل اجزای سرور انجام می شود و SSR را ساده می کند.
• عملکردهای Async برای بازیابی داده ها: اجزای سرور می توانند استفاده کنند async/await برای واگذاری داده ها بدون تنظیمات اضافی. اجرای مثال:

// app/products/page.tsx
import React from 'react';

export default async function ProductsPage() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return (
      

        
        

          {products.map((product) => (
            
{product.name}
          ))}
        
      
    );
}

الگوهای ترکیب برای کنترل پیشرفته

مطابق با مستندات Next.JS در مورد الگوهای ترکیب ، می توان از رویکردهای مختلفی برای تعادل رندر سمت سرور و تعامل سمت مشتری استفاده کرد:

• هیدراتاسیون جزئی: یک صفحه را به سرور و مؤلفه های مشتری تقسیم کنید ، و بیشتر محتوای سرور را برای عملکرد ارائه می دهد در حالی که به بخش های پویا تعاملی می شود.
• جزایر مؤلفه مشتری: جزایر تعاملی (مؤلفه های مشتری) را در محتوای ارائه شده با سرور قرار دهید. این روش به کاهش میزان جاوا اسکریپت مورد نیاز در سمت مشتری کمک می کند در حالی که هنوز تعامل غنی را فراهم می کند.
• پوسته های ارائه شده توسط سرور: ساختار بیرونی (پوسته) برنامه خود را با اجزای سرور بسازید و آن را با اجزای مشتری برای بخش های خاص که به تعامل کاربر نیاز دارند ، جمع کنید.

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

چرا این ذهنیت را اتخاذ می کنیم؟

• عملکرد بهبود یافته: با پیش فرض به مؤلفه های سرور و رویکرد جدید برای پذیرش داده ها ، برنامه شما از SSR بهینه شده بهره مند می شود و در نتیجه بارهای سریعتر صفحه می شود.
• سئو پیشرفته: صفحات ارائه شده با سرور موتورهای جستجو را با HTML کاملاً پرجمعیت فراهم می کنند و این امر باعث می شود که فهرست بندی محتوا را آسان تر کنید.
• اندازه بسته نرم افزاری مشتری: جداسازی منطق مشتری با “استفاده از مشتری” JavaScript را که به مرورگر ارسال شده است به حداقل می رساند.
• توسعه ساده: رویکرد جدید-داده شدن داده ها مستقیماً در مؤلفه های سرور ادغام می شود و نیاز به توابع یاور را از بین می برد.
• مقیاس پذیری و قابلیت حفظ: استفاده از الگوهای ترکیب ، مقیاس بندی ویژگی ها و مدیریت منطق رندر را آسان می کند.

پایان

تغییر به سمت “اجزای سرور ابتدا” در Next.js کاملاً با الگوهای ترکیب شرح داده شده در مستندات بعدی. JS هماهنگ است. این رویکرد SSR را ضمن حداکثر رساندن عملکرد و مزایای سئو ساده می کند. با اتخاذ این ذهنیت و پیروی از استراتژی های ترکیب ، تیم ها می توانند به سرعت برنامه های عالی مقیاس پذیر ، سریع و بهینه سازی شده را بسازند.

برنامه نویسی مبارک