1 
2لسنوات عديدة، كان أحد الأسئلة الأكثر إزعاجًا في Next.js هو: "هل هذه الصفحة ثابتة أم ديناميكية؟". يبدو الأمر وكأنه سؤال بسيط، حتى تقوم بإضافة مكالمة إلى `cookies()`، أو `fetch` بخيارات مختلفة، أو عميل قاعدة بيانات، أو نظام إدارة المحتوى (CMS)، أو عربة تسوق، أو جزء من المحتوى المخصص.
3 
4يعد Next.js 16 مثيرًا للاهتمام لأنه يحاول جعل هذه المحادثة أقل غموضًا. إنه لا يزيل التعقيد، ولكنه يغير النموذج العقلي: تكون المسارات ديناميكية بشكل افتراضي، وتعلن ذاكرة التخزين المؤقت عن نفسها عند الحاجة، ويصبح `Suspense` الطريقة الطبيعية لتكوين أغلفة سريعة بأجزاء تظل جديدة.
5 
6الميزة التي يجب فهمها هي مكونات ذاكرة التخزين المؤقت. تعد Stable Turbopack وReact Compiler و`proxy.ts` وواجهات برمجة التطبيقات الجديدة للإبطال مهمة، ولكنها تدور حول نفس المشكلة: إنشاء تطبيقات سريعة دون الحاجة إلى تخمين ما قرره إطار العمل خلف الكواليس.
7 
8## لأن هذا الشيء مهم
9 
10في التطبيق الحقيقي، لا يكون لديك فقط "صفحات ثابتة" و"صفحات ديناميكية". لديك قطع مختلفة باحتياجات مختلفة.
11 
12قد تتغير ورقة المنتج عدة مرات في اليوم. قد يتغير السعر في كثير من الأحيان. يجب أن يكون التوفر مباشرًا تقريبًا. اسم المستخدم شخصي. يمكن دفق التعليقات. يمكن أن يكون الشريط الجانبي مستقرًا. العربة لا.
13 
14إذا تعاملت مع كل شيء كوحدة واحدة، فسوف ينتهي بك الأمر دائمًا إلى أحد النقيضين:
15 
16- التخزين المؤقت العدواني وخطر رؤية البيانات القديمة؛
17- العرض الديناميكي في كل مكان والأداء أسوأ من اللازم.
18 
19تعمل مكونات ذاكرة التخزين المؤقت على وجه التحديد على تجنب هذا الاختيار الخاطئ.
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[الجري داخل التشويق]
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- محتوى ذاكرة التخزين المؤقت مستقر نسبيًا؛
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## Turbopack المستقر: الجزء الذي تسمعه كل يوم
133 
134يقوم Next.js 16 بإحضار Turbopack إلى مركز التطوير والبناء. إنها ليست الميزة الأكثر شاعرية، ولكنها الميزة التي تشعر بها أثناء العمل: الخادم الذي يبدأ مبكرًا، والتحديث الأسرع، والبنيات التي لا تشعر وكأنها استراحة قسرية لتناول القهوة.
135 
136ومع ذلك، لن أقوم بترحيل قاعدة تعليمات برمجية مليئة بالمكونات الإضافية المخصصة وعيناي مغمضتان. أود أن أتحقق:
137 
138- البناء المحلي
139- استيراد غير قياسي
140- MDX، SVG وCSS؛
141- ملحقات Webpack المتبقية؛
142- صفحات حرجة؛
143- الاختلافات في أوقات البناء.
144 
145بالنسبة للمشاريع الجديدة، سأبدأ من الافتراضي. بالنسبة للأشخاص الناضجين، سأقوم بهجرة محسوبة.
146 
147## رد الفعل المترجم: إزالة الضوضاء، وليس الفكر
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. أقوم بتمكين مكونات ذاكرة التخزين المؤقت في قسم حيث تؤدي ذاكرة التخزين المؤقت حاليًا إلى حدوث احتكاك؛
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- [رد الفعل المترجم v1.0](https://react.dev/blog/2025/10/07/react-compiler-1)
223