تیم توسعه Next.js پس از انتشار نسخه اولیه از نسخه ۱۵ Next.js، بازخوردهای زیادی را از توسعه‌دهندگان دریافت کرد که یکی از این موارد مربوط به مفهوم chacing است، و نشان می‌دهد بسیاری از قسمت‌های برنامه به‌صورت پیش‌فرض در حافظه cache ذخیره نمی‌شوند.

در نسخه Next.js 15، اگر تابع fetch را بر روی برخی از APIها اعمال کنیم، یا این که یک کوئری پایگاه داده بسازیم نتیجه chace نمی‌شود. به این معنی که مفهوم chacing در نسخه ۱۵ یک حالت داینامیک دارد. بنابراین اگر می‌خواهیم داده‌ها را در حافظه cache ذخیره کنیم، می‌توانیم خودمان این رفتار را انتخاب نماییم.

در این مقاله قصد داریم تا ویژگی‌های جدید در نسخه ۱۵ Next.js را بیشتر باهم بررسی کنیم.

منظور از prerendering چیست؟

prerendering جایی است که ما سعی می‌کنیم تا یک صفحه HTML استاتیک را در طول next build ایجاد نماییم. مفهوم prerendering جدا از chace کردن داده‌ها یا کوئری‌های پایگاه داده می‌باشد.

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

چرا توسعه local با production متفاوت است؟

هنگامی که ما سرور توسعه local خود را اجرا کرده و صفحه را مجدداً لود می‌کنیم، کامپوننت‌هایی که داریم داده‌های جدیدی را دریافت می‌کنند، اما نتایج در حافظه cache ذخیره نمی‌شوند. ما انتظار داریم که داده‌های جدید را مشاهده کنیم. اما در production، ممکن است بخواهیم کل صفحه با انجام prerendering در یک صفحه HTML قرار داده و همان صفحه رندر شده را به همه کاربران نمایش دهیم.

از نسخه ۹ Next.js به بعد، هنگامی که یک production build ایجاد می‌کنیم، Next.js سعی می‌کند مسیرهای برنامه را از قبل رندر نماید. در Pages Router، زمانی که از getServerSideProps استفاده نمی‌کنیم، این کار به صورت خودکار اتفاق می‌افتد. می‌توانیم با استفاده از getStaticProps دریافت داده‌های اضافی را برای یک مسیر استاتیک انجام دهیم. استفاده از getServerSideProps این امکان را به ما می‌دهد تا بتوانیم رندر کردن مسیر را به صورت داینامیک نیز انتخاب کنیم.

در App Router و با استفاده از سرور کامپوننت‌ها، می‌توانیم داده‌ها را از کامپوننت‌ها دریافت نماییم. اما دریافت داده، به این معنی نیست که می‌خواهیم همیشه آن کامپوننت به صورت داینامیک رندر شود. برخی از سرور کامپوننت‌هایی که داریم باید بتوانند از قبل به HTML استاتیک prerender شوند.

این مفهوم به اندازه Pages Router APIها صریح نیست. صفحه ما تنها زمانی به صورت داینامیک رندر می‌شود که چیزی از درخواست دریافتی را بخوانیم. به عنوان مثال، خواندن searchParams، cookies یا headers. انجام fetch به‌طور خودکار صفحه را داینامیک نمی‌کند، زیرا ممکن است بخواهیم آن کامپوننت از قبل رندر شود.

چرا از prerender در توسعه local استفاده نمی‌کنیم؟

تیم توسعه معتقد است که تجربه توسعه local باید تا حد امکان lazy باشد. صفحات باید در صورت تقاضا کامپایل شوند. توسعه‌دهندگان نمی‌خواهند قبل از شروع به کار، برای کامپایل شدن هر مسیر منتظر بمانند.

Prerendering برای هر مسیر در حالت ذخیره کُند خواهد بود، که این موضوع در تضاد با بهبود زمان‌های Fast Refresh می‌باشد. با Fast Refresh می‌توانیم تغییری در کد خود ایجاد کنیم، و بدون این که state کلاینت فعلی را از دست بدهیم، فوراً به‌روزرسانی برنامه را مشاهده نماییم.

با این حال، میل به دانستن اینکه آیا صفحه در طول توسعه محلی prerender می‌شود یا خیر، وجود دارد. اگر صفحه prerender می‌شد، تیم توسعه یک آیکون را در سمت راست پایین صفحه نمایش می‌داد. این مفهوم بار دیگر در نسخه ۱۵ Next.js ارائه خواهد شد.

آینده Next.js به چه سمتی می‌رود؟

با انتشار نسخه پایدار ۱۵، تیم توسعه بیان کرده است که در وبلاگ خود، در مورد اهداف و برنامه‌های آینده بیشتر خواهند نوشت. هدف تیم توسعه این است که همه عملیات asynchronous مانند انجام fetch، مشابه نحوه انتخاب headers، را در رندر داینامیک انتخاب کنیم.

همچنین تیم توسعه معتقد است که Partial Prerendering به روش پیش‌فرض ساخت برنامه‌های Next.js تبدیل خواهد شد و مسیرها می‌توانند هم استاتیک و هم داینامیک باشند.

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

اگر بخواهیم مسیر بیشتری در prerender گنجانده شود، می‌توانیم قسمت‌های داینامیک صفحه خود را در React Suspense قرار دهیم تا fallback state تعریف کنیم. سپس Next.js می‌تواند تا مرز Suspense به عنوان بخشی از فرآیند ساخت، prerender کند. هنگام ارائه صفحه، بلافاصله HTML از پیش رندر شده به کاربر نشان داده می‌شود و به طور همزمان بخش‌های داینامیک مسیر را ارائه می‌دهد.

Partial Prerendering به طور کامل توسط next start، پشتیبانی می‌شود و فعلا در مرحله آزمایشی قرار دارد.

چه زمانی می‌توانیم از امکانات نسخه ۱۵ Next.js استفاده کنیم؟

نسخه پایدار Next.js به زودی منتشر خواهد شد که شامل تغییرات caching پیش‌فرض که قبلا آن‌ها را ذکر کردیم می‌باشد. چه در نسخه ۱۵٫۰٫۰ و چه در یک نسخه کوچک که به زودی پس از آن منتشر می‌شود، این امکان برای توسعه‌دهندگان فراهم می‌گردد که مطالب ذکر شده را تحت flag opt-in امتحان کنند.

همچنین تیم توسعه در حال کار بر روی ساده‌سازی APIهای caching موجود و ایجاد DevTools برای Next.js هستند، که اطلاعات تکمیلی در این زمینه به زودی منتشر خواهد شد.

جمع‌بندی نسخه ۱۵ Next.js