تغییرات Next.js در نسخه ۱۴٫۲

سودا مجتهدی
اردیبهشت 2, 1403

نسخه Next.js 14.2 شامل بهبودهای development، production و caching می‌باشد. در این مقاله قصد داریم تا بهبودهایی که در این نسخه صورت گرفته است را با هم بررسی کنیم.

خلاصه این تغییرات عبارت است از:

  • Turbopack برای development: پاس شدن ۹۹٫۸ درصد از تست‌ها برای next dev --turbo.
  • بهبودهای Build و Production: کاهش استفاده Build از memory و بهینه‌سازی فایل‌های CSS.
  • بهبودهای مربوط به Caching: تنظیم دوره‌های زمانی برای ابطال اعتبار داده‌ها با استفاده از staleTimes.
  • بهبودهای مربوط به Error: بهبود طراحی و عملکرد مربوط خطاهای hydration error.

بررسی Turbopack برای development

تیم Next.js در چند ماه گذشته،بر روی بهبود عملکرد ب کمک Turbopack کار کرده‌ است. اکنون Turbopack در نسخه ۱۴٫۲ Next.js برای استفاده در دسترس قرار گرفته است:

  • ۹۹٫۸ درصد از تست‌های integration مورد قبول واقع شده‌اند.
  • ۳۰۰ پکیج برتر npm که توسط کاربران در برنامه‌های Next.js مورد استفاده قرار می‌گیرد، اکنون می‌توانند با Turbopack کامپایل شوند.
  • همه نمونه‌های Next.js با Turbopack کار می‌کنند.
  • Lightning CSS که یک bundler سریع CSS و minifier است و با Rust نوشته شده، در این نسخه یکپارچه شده است.

همچنین تیم توسعه Turbopack را به طور گسترده با برنامه‌های Vercel، مثلا vercel.com که یک برنامه بزرگ Next.js تست کرده است. نتایجی که بدست آمد به شرح زیر می‌باشد:

  • راه اندازی سریع‌تر local server تا ۷۶٫۷ درصد.
  • به‌روزرسانی سریع‌تر کد با Fast Refresh تا ۹۶٫۳ درصد.
  • کامپایل route اولیه سریع‌تر بدون caching تا ۴۵٫۸ درصد (Turbopack فعلا disk caching ندارد).
next dev --turbo

تیم توسعه اکنون بر روی بهبود استفاده از memory، پیاده‌سازی caching دائمی و next build --turbo تمرکز خواهد کرد.

  • استفاده از memory: تیم Next.js ابزارهای سطح پایینی را برای بررسی میزان استفاده از memory ساخته است. اکنون می‌توانیم لاگ‌هایی ایجاد کنیم که هم معیارهای عملکرد و هم میزان استفاده از memory را شامل می‌شوند. این لاگ‌ها به تیم توسعه امکان می‌دهد تا این معیارها را بدون نیاز به دسترسی به سورس کد برنامه، بررسی کنند.
  • حافظه Caching دائمی: در مورد این موضوع تیم توسعه همچنین در حال بررسی بهترین گزینه‌های معماری می‌باشد و انتظار می‌رود جزئیات بیشتری را در نسخه بعدی به اشتراک بگذارند.
  • next build: هدف تیم توسعه Next.js این است که build را به حالت Turbopack هم اضافه نمایند. در حال حاضر ۷۴٫۷ درصد از تست‌ها انجام شده است. می‌توانیم برای مشاهده مسیر پیشرفت لینک areweturboyet.com/build را دنبال کنیم.

همینطور برای مشاهده لیستی از ویژگی‌های پشتیبانی شده و پشتیبانی نشده در Turbopack، مطالعه مستندات می‌تواند مفید باشد.

بررسی بهبودهای مربوط به Build و Production

تیم توسعه Next.js علاوه بر بهبودهای مربوط با Turbopack، بر روی بهبود عملکرد کلی build و production برای همه برنامه‌های Next.js (هم Pages Router و هم App Router) کار کرده است.

Tree-shaking

یکی دیگر از بهبودهایی که تیم Next.js معرفی کرده است این است که دیگر exportها بلا استفاده در bundle قرار نخاوهند گرفت. به عنوان مثال، اگر ما یک کامپوننت Icon را از فایلی که دارای use Client است import کنیم، فقط شامل آیکنی می‌شود که مدنظر ما می‌باشد و سایرآیکون‌های پکیج دیگر در bundle قرار نمی‌گیرد. این کار می‌تواند تا حد زیادی اندازه bundle را کاهش دهد.

با تست این بهینه‌سازی بر روی یک کتابخانه محبوب مانند react-aria-components، اندازه bundle نهایی تا ۵۱٫۳ درصد کاهش پیدا کرد.

توجه به این نکته لازم است، این بهینه‌سازی در حال حاضر با فایل‌های barrel کار نمی‌کند. برای این کار می‌توانیم در فایل next.config.ts، از گزینه optimizePackageImports استفاده نماییم:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

استفاده از Memory در زمان Build

تیم توسعه، در طول build برنامه‌های Next.js در مقیاس بسیار بزرگ، متوجه خرابی‌های OOMs شد. پس از تحقیقات فراوان و بررسی گزارش‌های کاربران، متوجه شدند که مشکل مصرف زیاد memory به دلیل over-bundling و minification است. یعنی Next.js حین build برنامه، فایل‌های جاوااسکریپت را به شکل تکرار ایجاد می‌کند. به این ترتیب، تیم Next.js منطق bundling را refactor کرده و کامپایلر را برای این موارد بهینه کردند.

تست‌های اولیه نشان می‌دهد که در یک برنامه کوچک Next.js، میزان استفاده از memory و اندازه فایل کش از ۲٫۲ گیگابایت به کم‌تر از ۱۹۰ مگابایت کاهش یافته است.

همینطور برای آسان‌تر شدن دیباگ کردن عملکرد حافظه، یک flag به نام --experimental-debug-memory-usage در next build معرفی شده است که با مطالعه مستندات می‌توانیم اطلاعات بیشتری در این زمینه بدست بیاوریم.

CSS

تیم توسعه در نسخه ۱۴٫۲ Next.js، نحوه بهینه‌سازی CSS را در حین build با تقسیم کردن CSS به فایل‌های کوچک به نام CSS chunks به‌روزرسانی کرده است تا هنگام پیمایش بین صفحات از ایجاد تناقض بین استایل‌ها جلوگیری کند.

ترتیب و ادغام CSS chunkها اکنون با ترتیب importها تعریف می‌شود. به عنوان مثال در کد زیر، base-button.module.css قبل از page.module.css می‌باشد.

فایلbase-button.tsx:

import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}

فایل page.tsx:

import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

برای حفظ ترتیب درست CSS، توصیه می‌شود تا:

  • به جای global styles از CSS Modules استفاده کنیم.
  • در یک فایل جاوااسکریپتی یا تایپ اسکریپتی فقط یک CSS Module را import کنیم.
  • اگر از class name سراری استفاده می‌کنیم، استایل‌های سراسری را در همان فایل جاوااسکریپتی یا تایپ اسکریپتی نیز import کنیم.

انتظار ممی‌رود که این تغییرات بر روی برنامه‌ها تأثیر منفی نگذارد. با این حال، اگر در هنگام ارتقا، درمورد استایل‌ها دچار مشکل شدیم مطالعه مستندات مربوط به ترتیب اصولی پیاده‌سازی css می‌تواند بسیار مفید باشد.

بررسی بهبودهای مربوط به Caching

مفهوم Caching بخش مهمی از ساخت اپلیکیشن‌های وب سریع و قابل اعتماد است. هنگام انجام mutationها، هم کاربران و هم توسعه‌دهندگان انتظار دارند که حافظه cache به‌روزرسانی شود تا آخرین تغییرات را منعکس کند.

staleTimes

Router Cache سمت کلاینت یک لایه ذخیره‌سازی است که برای ارائه یک تجربه navigation سریع، از طریق کش کردن مسیرهای بازدید شده و از پیش fetch شده روی کلاینت طراحی شده است.

تیم توسعه بر اساس بازخوردها، یک گزینه آزمایشی به نام staleTimes اضافه کرده است تا توسعه‌دهندگان بتوانند برای ابطال اعتبار داده‌ها، یک دوره زمانی را در client-side router cache پیکربندی کنند.

به‌طور پیش‌فرض، مسیرهای از پیش fetch شده، با استفاده از کامپوننت <Link>بدون prop prefetch به مدت ۳۰ ثانیه و اگر prop prefetch روی true تنظیم شود، به مدت ۵ دقیقه در حافظه cache ذخیره می‌شوند. می‌توانیم این مقادیر پیش‌فرض را با استفاده از تنظیمات زیر درفایل next.config.js بازنویسی کنیم:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

هدف staleTimes بهبود تجربه فعلی کاربرانی است که خواهان کنترل بیشتر بر روی مباحث caching هستند، اما این راه حل کامل نیست. تیم Next.js در نسخه‌های آینده، راه‌حل‌های انعطاف‌پذیرتری را ارائه خواهد کرد. مطالعه مستندات درمورد staleTimes می‌تواند مفید باشد.

مسیرهای Parallel و intercept

تیم توسعه به کار بر روی مسیرهای Parallel و Intercept ادامه می‌دهد و اکنون در نسخه ۱۴٫۲ Next.js این دو مورد با Client-side Router Cache سازگار می‌باشند.

  • مسیرهای Parallel و Intercept که Server Actionها را با revalidatePath یا revalidateTag فراخوانی می‌کنند، حافظه cache را مجدداً اعتبارسنجی کرده و اسلات‌های قابل مشاهده را رفرش می‌کنند و در عین حال view فعلی کاربر را حفظ می‌نمایند.
  • به همین ترتیب، فراخوانی refresh اکنون به درستی اسلات‌های قابل مشاهده را رفرش کرده و view فعلی را حفظ می‌کند.

بررسی بهبودهای مربوط به Errorsها

تیم توسعه از نسخه ۱۴٫۱، کار خود را در رابطه با بهبود پیام‌های خطا هنگام اجرای next dev شروع کرده است. این کار تا نسخه ۱۴٫۲ Next.js ادامه یافته و اکنون شامل پیام‌های خطای واضح‌تر، بهبود طراحی برای App Router و Pages Router، پشتیبانی از دارک مود و لایت مود و گزارش‌های dev و build واضح‌تر می‌باشد.

React 19

تیم React در ماه فوریه، نسخه React 19 را منتشر می‌کند. بنابراین، تیم Next.js برای این که آماده React 19 باشد، در حال کار بر روی آخرین ویژگی‌ها و بهبودها در Next.js است و قصد دارد تا یک نسخه اصلی و هماهنگ با آخریت تغییرات React منتشر کند.

دیدگاه‌ها:

افزودن دیدگاه جدید