Next.js 16, ক্যাশে কম্পোনেন্ট এবং রিঅ্যাক্ট কম্পাইলার: আসলে কি পরিবর্তন হয়

spinny:~/writing $ vim nextjs-16-cache-components.md

1~
2কয়েক বছর ধরে Next.js-এর সবচেয়ে বিরক্তিকর প্রশ্ন হল: "এই পৃষ্ঠাটি কি স্ট্যাটিক নাকি গতিশীল?"। এটি একটি সাধারণ প্রশ্ন বলে মনে হচ্ছে, যতক্ষণ না আপনি `cookies()`, একটি `fetch` এ বিভিন্ন বিকল্প, একটি ডাটাবেস ক্লায়েন্ট, একটি CMS, একটি শপিং কার্ট, বা কাস্টম সামগ্রীর একটি অংশ যুক্ত না করেন৷
3~
4Next.js 16 আকর্ষণীয় কারণ এটি এই কথোপকথনটিকে কম রহস্যময় করার চেষ্টা করে। এটি জটিলতা দূর করে না, তবে এটি মানসিক মডেলকে পরিবর্তন করে: রুটগুলি ডিফল্টরূপে গতিশীল, যেখানে প্রয়োজন সেখানে ক্যাশে নিজেকে ঘোষণা করে এবং `Suspense` সতেজ থাকা অংশগুলির সাথে দ্রুত শেল রচনা করার প্রাকৃতিক উপায় হয়ে ওঠে।
5~
6বোঝার বৈশিষ্ট্য হল ক্যাশে উপাদান। স্টেবল টার্বোপ্যাক, রিঅ্যাক্ট কম্পাইলার, `proxy.ts`, এবং নতুন অবৈধকরণ APIগুলি গুরুত্বপূর্ণ, কিন্তু তারা একই সমস্যার চারপাশে ঘোরে: পর্দার আড়ালে ফ্রেমওয়ার্ক কী সিদ্ধান্ত নিয়েছে তা অনুমান না করেই দ্রুত অ্যাপ তৈরি করা।
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` ব্যবহার করছেন না তখন এটি বিশেষভাবে কার্যকর। অনেক অ্যাপ প্রিজমা, ড্রিজল, অভ্যন্তরীণ 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 টার্বোপ্যাককে উন্নয়ন এবং নির্মাণের জন্য কেন্দ্রে নিয়ে আসে। এটি সবচেয়ে কাব্যিক বৈশিষ্ট্য নয়, তবে আপনি কাজ করার সময় এটি অনুভব করেন: সার্ভার যা আগে শুরু হয়, দ্রুত রিফ্রেশ করে, বাধ্যতামূলক কফি বিরতির মতো অনুভূতি বন্ধ করে দেয়।
135~
136এটা বলেছে, আমি চোখ বন্ধ করে কাস্টম প্লাগইন পূর্ণ কোডবেস স্থানান্তর করব না। আমি পরীক্ষা করব:
137~
138- স্থানীয় নির্মাণ;
139- অ-মানক আমদানি;
140- MDX, SVG এবং CSS;
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. আমি পরবর্তী, প্রতিক্রিয়া এবং প্রতিক্রিয়া DOM আপডেট করি;
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~

NORMAL · nextjs-16-cache-components.md [readonly]223 lines · :q to close

2কয়েক বছর ধরে Next.js-এর সবচেয়ে বিরক্তিকর প্রশ্ন হল: "এই পৃষ্ঠাটি কি স্ট্যাটিক নাকি গতিশীল?"। এটি একটি সাধারণ প্রশ্ন বলে মনে হচ্ছে, যতক্ষণ না আপনি `cookies()`, একটি `fetch` এ বিভিন্ন বিকল্প, একটি ডাটাবেস ক্লায়েন্ট, একটি CMS, একটি শপিং কার্ট, বা কাস্টম সামগ্রীর একটি অংশ যুক্ত না করেন৷

4Next.js 16 আকর্ষণীয় কারণ এটি এই কথোপকথনটিকে কম রহস্যময় করার চেষ্টা করে। এটি জটিলতা দূর করে না, তবে এটি মানসিক মডেলকে পরিবর্তন করে: রুটগুলি ডিফল্টরূপে গতিশীল, যেখানে প্রয়োজন সেখানে ক্যাশে নিজেকে ঘোষণা করে এবং `Suspense` সতেজ থাকা অংশগুলির সাথে দ্রুত শেল রচনা করার প্রাকৃতিক উপায় হয়ে ওঠে।

6বোঝার বৈশিষ্ট্য হল ক্যাশে উপাদান। স্টেবল টার্বোপ্যাক, রিঅ্যাক্ট কম্পাইলার, `proxy.ts`, এবং নতুন অবৈধকরণ APIগুলি গুরুত্বপূর্ণ, কিন্তু তারা একই সমস্যার চারপাশে ঘোরে: পর্দার আড়ালে ফ্রেমওয়ার্ক কী সিদ্ধান্ত নিয়েছে তা অনুমান না করেই দ্রুত অ্যাপ তৈরি করা।

8## কারণ এই জিনিসটা গুরুত্বপূর্ণ

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` ব্যবহার করছেন না তখন এটি বিশেষভাবে কার্যকর। অনেক অ্যাপ প্রিজমা, ড্রিজল, অভ্যন্তরীণ 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 টার্বোপ্যাককে উন্নয়ন এবং নির্মাণের জন্য কেন্দ্রে নিয়ে আসে। এটি সবচেয়ে কাব্যিক বৈশিষ্ট্য নয়, তবে আপনি কাজ করার সময় এটি অনুভব করেন: সার্ভার যা আগে শুরু হয়, দ্রুত রিফ্রেশ করে, বাধ্যতামূলক কফি বিরতির মতো অনুভূতি বন্ধ করে দেয়।

135~

136এটা বলেছে, আমি চোখ বন্ধ করে কাস্টম প্লাগইন পূর্ণ কোডবেস স্থানান্তর করব না। আমি পরীক্ষা করব:

137~

138- স্থানীয় নির্মাণ;

139- অ-মানক আমদানি;

140- MDX, SVG এবং CSS;

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. আমি পরবর্তী, প্রতিক্রিয়া এবং প্রতিক্রিয়া DOM আপডেট করি;

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~