1~
2वर्षों से Next.js में सबसे कष्टप्रद प्रश्नों में से एक यह रहा है: "क्या यह पृष्ठ स्थिर या गतिशील है?"। यह एक साधारण प्रश्न प्रतीत होता है, जब तक कि आप `cookies()` में एक कॉल, विभिन्न विकल्पों के साथ एक `fetch`, एक डेटाबेस क्लाइंट, एक CMS, एक शॉपिंग कार्ट, या कस्टम सामग्री का एक टुकड़ा नहीं जोड़ते।
3~
4Next.js 16 दिलचस्प है क्योंकि यह इस बातचीत को कम रहस्यमय बनाने की कोशिश करता है। यह जटिलता को खत्म नहीं करता है, लेकिन यह मानसिक मॉडल को बदल देता है: मार्ग डिफ़ॉल्ट रूप से गतिशील होते हैं, कैश जहां आवश्यक हो वहां खुद को घोषित करता है, और `Suspense` ताजा रहने वाले हिस्सों के साथ तेज शेल बनाने का प्राकृतिक तरीका बन जाता है।
5~
6समझने की सुविधा कैश कंपोनेंट्स है। स्थिर टर्बोपैक, रिएक्ट कंपाइलर, `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` का उपयोग नहीं कर रहे हों। कई ऐप्स प्रिज्मा, ड्रिज़ल, आंतरिक एसडीके, सीएमएस क्लाइंट या सेवा कार्यों से डेटा पढ़ते हैं। उन मामलों में केवल `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## स्थिर टर्बोपैक: वह हिस्सा जो आप हर दिन सुनते हैं
133~
134Next.js 16 विकास और निर्माण के लिए टर्बोपैक को केंद्र में लाता है। यह सबसे काव्यात्मक विशेषता नहीं है, लेकिन यह वह है जिसे आप काम करते समय महसूस करते हैं: सर्वर जो पहले शुरू होता है, तेजी से ताज़ा होता है, ऐसा बनाता है जो एक मजबूर कॉफी ब्रेक की तरह महसूस करना बंद कर देता है।
135~
136जैसा कि कहा गया है, मैं अपनी आंखें बंद करके कस्टम प्लगइन्स से भरे कोडबेस को माइग्रेट नहीं करूंगा। मैं जाँच करूँगा:
137~
138- स्थानीय निर्माण;
139- गैर-मानक आयात;
140- एमडीएक्स, एसवीजी और सीएसएस;
141- वेबपैक प्लगइन्स बचे;
142- महत्वपूर्ण पृष्ठ;
143- निर्माण समय में अंतर.
144~
145नई परियोजनाओं के लिए, मैं डिफ़ॉल्ट से शुरू करूँगा। परिपक्व लोगों के लिए, मैं एक मापा प्रवासन करूँगा।
146~
147## रिएक्ट कंपाइलर: शोर हटाएं, विचार नहीं
148~
149रिएक्ट कंपाइलर 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मैं इसे जादुई धूल की तरह नहीं मानूंगा। जब कोड रिएक्ट नियमों का अच्छी तरह से पालन करता है तो कंपाइलर मदद करता है। यदि घटकों में अजीब दुष्प्रभाव, छिपे हुए उत्परिवर्तन या बुरी तरह से उपयोग किए गए हुक हैं, तो पहले इसे ठीक करने की आवश्यकता है।
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. मैं नेक्स्ट, रिएक्ट और रिएक्ट डोम को अपडेट करता हूं;
2002. मैं आधिकारिक कोडमॉड लॉन्च करता हूं;
2013. मैं `params`, `searchParams`, `cookies()`, `headers()` और `draftMode()` पर ब्रेकिंग परिवर्तन ठीक करता हूं;
2024. मैं `middleware.ts` को `proxy.ts` में स्थानांतरित करता हूँ;
2035. मैं बिल्ड और महत्वपूर्ण पृष्ठों की जाँच करता हूँ;
2046. मैं उस अनुभाग पर कैश घटकों को सक्षम करता हूं जहां कैश वर्तमान में घर्षण पैदा करता है;
2057. मैं टैग और अमान्यकरण के लिए सम्मेलनों को परिभाषित करता हूं;
2068. मैं रिएक्ट कंपाइलर को अलग से आज़माता हूँ;
2079. पहले और बाद के मेट्रिक्स की तुलना।
208~
209अच्छा माइग्रेशन वह नहीं है जो सभी नई सुविधाओं का उपयोग करता है। यह ऐप के व्यवहार को अधिक पठनीय बनाता है।
210~
211## सोचने के तरीके में क्या बदलाव आता है
212~
213Next.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~