1~
2برای سال‌ها یکی از آزاردهنده‌ترین سوالات در Next.js این بود: "این صفحه ثابت است یا پویا؟". این یک سوال ساده به نظر می رسد، تا زمانی که یک تماس به `cookies()`، یک `fetch` با گزینه های مختلف، یک سرویس گیرنده پایگاه داده، یک CMS، یک سبد خرید، یا یک قطعه از محتوای سفارشی اضافه کنید.
3~
4Next.js 16 جالب است زیرا سعی می کند این مکالمه را کمتر مرموز کند. این پیچیدگی را از بین نمی‌برد، اما مدل ذهنی را تغییر می‌دهد: مسیرها به‌طور پیش‌فرض پویا هستند، حافظه پنهان در جایی که لازم است خود را اعلام می‌کند، و `Suspense` راهی طبیعی برای ترکیب پوسته‌های سریع با قطعاتی می‌شود که تازه می‌مانند.
5~
6ویژگی قابل درک، Cache Components است. Stable Turbopack، React Compiler، `proxy.ts`، و API های جدید باطل اهمیت دارند، اما حول همین مشکل می چرخند: ساخت برنامه های سریع بدون نیاز به حدس زدن چارچوب در پشت صحنه چه تصمیمی گرفته است.
7~
8## چون این چیز مهمه
9~
10در یک برنامه واقعی، شما فقط "صفحات ثابت" و "صفحات پویا" ندارید. شما قطعات مختلف با نیازهای متفاوت دارید.
11~
12برگه محصول ممکن است چند بار در روز تغییر کند. قیمت ممکن است بیشتر تغییر کند. در دسترس بودن باید تقریباً زنده باشد. نام کاربری شخصی است. نظرات را می توان به صورت جریانی پخش کرد. نوار کناری می تواند پایدار باشد. سبد خرید ندارد.
13~
14اگر همه چیز را به عنوان یک واحد در نظر بگیرید، همیشه در یکی از دو حالت افراطی قرار می گیرید:
15~
16- حافظه پنهان تهاجمی و خطر دیدن داده های قدیمی؛
17- رندر پویا در همه جا و عملکرد بدتر از حد لازم.
18~
19Cache Components دقیقاً برای جلوگیری از این انتخاب اشتباه عمل می کند.
20~
21## مدل در عمل
22~
23با `cacheComponents: true`، می توانید با استفاده از `"use cache"` آنچه را که در حافظه پنهان است، اعلام کنید. سپس می توانید مدت زمان و برچسب ها را با `cacheLife()` و `cacheTag()` مرتبط کنید. قطعات دینامیک پویا باقی می مانند و با `Suspense` قابل جداسازی هستند.
24~
25```mermaid
26flowchart TD
27    Request[درخواست کاربر] --> Shell[پوسته ذخیره شده]
28    Request --> Dynamic[مقاطع پویا]
29    Shell --> FirstPaint[اولین محتوای سریع]
30    Dynamic --> Stream[در حال پخش در داخل Suspense]
31    Stream --> Complete[صفحه کامل]
32```
33~
34تنظیمات کوچک است:
35~
36```typescript
37// next.config.ts
38import type { NextConfig } from 'next';
39~
40const nextConfig: NextConfig = {
41  cacheComponents: true,
42};
43~
44export default nextConfig;
45```
46~
47تغییر بزرگ در پیکربندی نیست. این در نحوه شروع نوشتن اجزاست.
48~
49```tsx
50// app/products/[slug]/page.tsx
51import { Suspense } from 'react';
52import { cacheLife, cacheTag } from 'next/cache';
53~
54async function getProduct(slug: string) {
55  'use cache';
56~
57  cacheLife('hours');
58  cacheTag(`product:${slug}`);
59~
60  return db.product.findUnique({ where: { slug } });
61}
62~
63async function ProductDetails({ slug }: { slug: string }) {
64  const product = await getProduct(slug);
65~
66  return (
67    <section>
68      <h1>{product.name}</h1>
69      <p>{product.description}</p>
70    </section>
71  );
72}
73~
74async function LiveInventory({ slug }: { slug: string }) {
75  const inventory = await db.inventory.findFirst({ where: { slug } });
76  return <p>{inventory.quantity} pezzi disponibili</p>;
77}
78~
79export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
80  const { slug } = await params;
81~
82  return (
83    <>
84      <ProductDetails slug={slug} />
85      <Suspense fallback={<p>Controllo disponibilità...</p>}>
86        <LiveInventory slug={slug} />
87      </Suspense>
88    </>
89  );
90}
91```
92~
93لازم نیست صفحه تماماً کش یا تماماً پویا باشد. برگه محصول می تواند سریع و قابل استفاده مجدد باشد. موجودی می تواند تازه بماند. کاربر بلافاصله چیزی را می بیند، بدون اینکه منتظر کندترین قسمت باشد.
94~
95## `use cache` مستندات اجرایی است
96~
97چیزی که من در مورد `"use cache"` دوست دارم این است که شما را مجبور می کند که قصدی را صریح بیان کنید. هنگامی که یک تابع را می خوانید، بلافاصله متوجه می شوید که شخصی تصمیم گرفته است: "این داده ها قابل استفاده مجدد هستند".
98~
99به خصوص زمانی که از `fetch` استفاده نمی کنید مفید است. بسیاری از برنامه ها داده های Prisma، Drizzle، SDK های داخلی، کلاینت های CMS یا توابع سرویس را می خوانند. در آن موارد، استدلال قدیمی فقط بر اساس گزینه های `fetch` کافی نبود.
100~
101یک قانون سرانگشتی:
102~
103- محتوای cachea نسبتاً پایدار است.
104- از برچسب های دانه ای استفاده کنید.
105- مجوزهای پویا، جلسات، سبد خریدها، اعلان‌ها و وضعیت‌های تراکنش را ترک می‌کند.
106- قطعات کند را داخل `Suspense` قرار دهید.
107- قبل از گفتن "ما عملکرد را بهبود بخشیم" اندازه گیری کنید.
108~
109## بدون دور ریختن همه چیز باطل کنید
110~
111کش تنها زمانی مفید است که بتوانید آن را به طور دقیق به روز کنید. در اینجا `cacheTag`، `revalidateTag` و `updateTag` مهم می شوند.
112~
113مثال:
114~
115```typescript
116'use server';
117~
118import { updateTag } from 'next/cache';
119~
120export async function updateProductName(productId: string, name: string) {
121  await db.product.update({
122    where: { id: productId },
123    data: { name },
124  });
125~
126  updateTag(`product:${productId}`);
127}
128```
129~
130جزئیات مهم برچسب است. `product:${productId}` یک مرز دقیق را نشان می دهد. `products` به یک سطل بزرگ می گوید. در ابتدا سطل بزرگ راحت است. بعد از چند ماه این دلیلی می شود که نیمی از یک برنامه را برای تغییر عنوان باطل کنید.
131~
132## توربوپک پایدار: بخشی که هر روز می شنوید
133~
134Next.js 16 Turbopack را برای توسعه و ساخت به مرکز می آورد. این شاعرانه‌ترین ویژگی نیست، اما آن چیزی است که در حین کار احساس می‌کنید: سروری که زودتر شروع به کار می‌کند، سریع‌تر به‌روزرسانی می‌شود، ساخت‌هایی که احساس یک استراحت اجباری قهوه را ندارند.
135~
136با این حال، من یک پایگاه کد پر از پلاگین های سفارشی را با چشمان بسته منتقل نمی کنم. من بررسی می کنم:
137~
138- ساخت محلی؛
139- واردات غیر استاندارد؛
140- MDX، SVG و CSS؛
141- افزونه های Webpack باقی مانده است.
142- صفحات انتقادی؛
143- تفاوت در زمان ساخت
144~
145برای پروژه های جدید، از حالت پیش فرض شروع می کنم. برای افراد بالغ، من یک مهاجرت سنجیده انجام می دهم.
146~
147## React Compiler: حذف نویز، نه فکر
148~
149React Compiler 1.0 پایدار است و Next.js 16 آن را با `reactCompiler` پشتیبانی می کند. وعده کاهش مقدار زیادی از یادداشت دستی است: کمتر `memo`، کمتر `useMemo`، کمتر `useCallback` استفاده شده "برای ایمنی".
150~
151```typescript
152// next.config.ts
153import type { NextConfig } from 'next';
154~
155const nextConfig: NextConfig = {
156  reactCompiler: true,
157};
158~
159export default nextConfig;
160```
161~
162من با آن مانند یک گرد و غبار جادویی رفتار نمی کنم. کامپایلر زمانی کمک می کند که کد به خوبی از قوانین React پیروی کند. اگر اجزاء دارای عوارض جانبی عجیب، جهش های پنهان یا قلاب های بد استفاده شده باشند، ابتدا باید اصلاح شوند.
163~
164روش سالم امتحان کردن:
165~
1661. به روز رسانی `eslint-plugin-react-hooks`؛
1672. رفع تخلفات واقعی؛
1683. آن را در یک منطقه کنترل شده فعال کنید.
1694. اندازه گیری زمان ساخت و رفتار.
1705. ذخیره سازی دستی را فقط زمانی حذف کنید که دیگر مورد نیاز نباشد.
171~
172هدف پاک کردن هر `useMemo` نیست. هدف این است که نوشتن یادداشت پیشگیرانه را متوقف کنیم زیرا از رندر می ترسیم.
173~
174## `proxy.ts` و مرز شبکه
175~
176`middleware.ts` قدیمی به `proxy.ts` تبدیل می شود. این یک تغییر نام است، اما منطقی است: آن فایل در مرز درخواست قرار می‌گیرد، یک میان‌افزار عمومی سنتی به سبک باطن نیست.
177~
178```typescript
179// proxy.ts
180import { NextRequest, NextResponse } from 'next/server';
181~
182export default function proxy(request: NextRequest) {
183  const isLoggedIn = Boolean(request.cookies.get('session'));
184~
185  if (!isLoggedIn && request.nextUrl.pathname.startsWith('/dashboard')) {
186    return NextResponse.redirect(new URL('/login', request.url));
187  }
188~
189  return NextResponse.next();
190}
191```
192~
193قانون اینجا ساده است: آن را کوچک نگه دارید. تغییر مسیر، مسیریابی احراز هویت، هدرها، بازنویسی های ضروری. اگر شروع به احساس یک باطن دوم کند، احتمالاً کار زیادی انجام می دهد.
194~
195## واقعا چقدر مهاجرت میکردم
196~
197من همه ویژگی ها را به یکباره روشن نمی کنم. من این کار را انجام می دهم:
198~
1991. من Next، React و React DOM را به روز می کنم.
2002. من کد مد رسمی را راه اندازی می کنم.
2013. من تغییرات شکستن را در `params`، `searchParams`، `cookies()`، `headers()` و `draftMode()` اصلاح می کنم.
2024. من `middleware.ts` را به `proxy.ts` مهاجرت می کنم.
2035. من ساخت و صفحات بحرانی را بررسی می کنم.
2046. من Cache Components را در بخشی فعال می کنم که کش در حال حاضر اصطکاک ایجاد می کند.
2057. من قراردادهایی را برای برچسب ها و باطل کردن تعریف می کنم.
2068. من React Compiler را جداگانه امتحان می کنم.
2079. مقایسه معیارهای قبل و بعد
208~
209مهاجرت خوب آن چیزی نیست که از همه ویژگی های جدید استفاده کند. این چیزی است که رفتار برنامه را خواناتر می کند.
210~
211## آنچه در طرز فکر تغییر می کند
212~
213مفیدترین چیز در مورد Next.js 16 این است که شما را مجبور می کند تا اهداف را بهتر نامگذاری کنید. یک تابع فقط "دریافت محصول از پایگاه داده" نیست. این "محصول را دریافت کنید، می توانم آن را برای ساعت ها کش کنم، با این برچسب آن را باطل می کنم". کامپوننت فقط "رندر صفحه" نیست. این "این پوسته سریع است، این قطعه شخصی است، این جریان پخش می شود."
214~
215در ابتدا به نظر می رسد کار بیشتر است. سپس به نوعی آرامش تبدیل می شود. تصمیمات مربوط به عملکرد دیگر در ترکیبی از پیش فرض ها، اکتشافی و حافظه قبیله ای پنهان نیستند. آنها در کد هستند.
216~
217## منابع مفید
218~
219- [یادداشت های انتشار Next.js 16](https://nextjs.org/blog/next-16)
220- [اجزای کش - اسناد Next.js](https://nextjs.org/docs/app/getting-started/cache-components)
221- [استفاده از کش - اسناد Next.js](https://nextjs.org/docs/app/api-reference/directives/use-cache)
222- [React Compiler نسخه 1.0](https://react.dev/blog/2025/10/07/react-compiler-1)
223~