1 
2Trong nhiều năm, một trong những câu hỏi khó chịu nhất trong Next.js là: "Trang này tĩnh hay động?". Đây có vẻ là một câu hỏi đơn giản cho đến khi bạn thêm lệnh gọi tới `cookies()`, `fetch` với các tùy chọn khác nhau, ứng dụng khách cơ sở dữ liệu, CMS, giỏ hàng hoặc một phần nội dung tùy chỉnh.
3 
4Next.js 16 thú vị vì nó cố gắng làm cho cuộc trò chuyện này bớt bí ẩn hơn. Nó không loại bỏ sự phức tạp, nhưng nó thay đổi mô hình tinh thần: các tuyến đường mặc định là động, bộ đệm tự khai báo khi cần thiết và `Suspense` trở thành cách tự nhiên để tạo ra các shell nhanh với các bộ phận luôn mới.
5 
6Tính năng cần hiểu là Cache Components. Turbopack ổn định, Trình biên dịch React, `proxy.ts` và các API vô hiệu hóa mới rất quan trọng nhưng chúng xoay quanh cùng một vấn đề: xây dựng các ứng dụng nhanh mà không cần phải đoán xem framework đã quyết định điều gì đằng sau hậu trường.
7 
8## Bởi vì điều này quan trọng
9 
10Trong ứng dụng thực, bạn không chỉ có "trang tĩnh" và "trang động". Bạn có những phần khác nhau với những nhu cầu khác nhau.
11 
12Bảng sản phẩm có thể thay đổi vài lần trong ngày. Giá có thể thay đổi thường xuyên hơn. Tính khả dụng phải gần như trực tiếp. Tên người dùng là cá nhân. Đánh giá có thể được truyền trực tuyến. Thanh bên có thể ổn định. Xe đẩy thì không.
13 
14Nếu bạn coi mọi thứ như một đơn vị, bạn sẽ luôn rơi vào một trong hai thái cực:
15 
16- bộ nhớ đệm tích cực và nguy cơ nhìn thấy dữ liệu cũ;
17- hiển thị động ở mọi nơi và hiệu suất kém hơn mức cần thiết.
18 
19Thành phần bộ đệm phục vụ chính xác để tránh lựa chọn sai lầm này.
20 
21## Mô hình trong thực tế
22 
23Với `cacheComponents: true`, bạn có thể khai báo những gì có thể lưu vào bộ nhớ đệm bằng `"use cache"`. Sau đó, bạn có thể liên kết thời lượng và thẻ với `cacheLife()` và `cacheTag()`. Các bộ phận động vẫn duy trì trạng thái động và có thể được tách biệt bằng `Suspense`.
24 
25```mermaid
26flowchart TD
27    Request[Yêu cầu của người dùng] --> Shell[Vỏ được lưu trong bộ nhớ đệm]
28    Request --> Dynamic[Phần động]
29    Shell --> FirstPaint[Nội dung nhanh đầu tiên]
30    Dynamic --> Stream[Truyền phát bên trong Hồi hộp]
31    Stream --> Complete[Toàn trang]
32```
33 
34Thiết lập nhỏ:
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 
47Sự thay đổi lớn không nằm ở cấu hình. Đó là cách bạn bắt đầu viết các thành phần.
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 
93Trang không nhất thiết phải được lưu hoàn toàn vào bộ nhớ đệm hoặc hoàn toàn động. Bảng sản phẩm có thể nhanh chóng và có thể tái sử dụng. Hàng tồn kho có thể vẫn còn mới. Người dùng sẽ nhìn thấy thứ gì đó ngay lập tức mà không cần chờ đợi phần chậm nhất.
94 
95## `use cache` là tài liệu thực thi
96 
97Điều tôi thích ở `"use cache"` là nó buộc bạn phải đưa ra ý định rõ ràng. Khi đọc một hàm, bạn hiểu ngay rằng ai đó đã quyết định: "dữ liệu này có thể được sử dụng lại".
98 
99Nó đặc biệt hữu ích khi bạn không sử dụng `fetch`. Nhiều ứng dụng đọc dữ liệu từ Prisma, Drizzle, SDK nội bộ, ứng dụng khách CMS hoặc chức năng dịch vụ. Trong những trường hợp đó, lý luận cũ chỉ dựa trên các tùy chọn `fetch` là không đủ.
100 
101Một nguyên tắc nhỏ:
102 
103- nội dung cachea tương đối ổn định;
104- sử dụng thẻ chi tiết;
105- để lại các quyền, phiên, giỏ hàng, thông báo và trạng thái giao dịch động;
106- đặt các phần chậm bên trong `Suspense`;
107- đo lường trước khi nói "chúng tôi đã cải thiện hiệu suất".
108 
109## Vô hiệu hóa mà không vứt bỏ mọi thứ
110 
111Bộ đệm chỉ hữu ích nếu bạn có thể cập nhật nó một cách chính xác. Ở đây `cacheTag`, `revalidateTag` và `updateTag` trở nên quan trọng.
112 
113Ví dụ:
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 
130Chi tiết quan trọng là thẻ. `product:${productId}` cho biết ranh giới chính xác. `products` kể về một cái thùng lớn. Lúc đầu, chiếc xô lớn rất thoải mái; sau một vài tháng, nó trở thành lý do khiến bạn vô hiệu hóa một nửa ứng dụng để thay đổi tiêu đề.
131 
132## Turbopack ổn định: phần bạn nghe thấy hàng ngày
133 
134Next.js 16 đưa Turbopack vào trung tâm phát triển và xây dựng. Đây không phải là tính năng thơ mộng nhất, nhưng là tính năng bạn cảm nhận được khi làm việc: máy chủ khởi động sớm hơn, làm mới nhanh hơn, xây dựng khiến bạn không còn cảm giác như đang phải nghỉ giải lao ép buộc để uống cà phê.
135 
136Điều đó có nghĩa là tôi sẽ không di chuyển một cơ sở mã chứa đầy các plugin tùy chỉnh khi nhắm mắt lại. Tôi sẽ kiểm tra:
137 
138- xây dựng địa phương;
139- nhập khẩu không đạt tiêu chuẩn;
140- MDX, SVG và CSS;
141- Các plugin webpack còn lại;
142- các trang quan trọng;
143- sự khác biệt về thời gian xây dựng.
144 
145Đối với các dự án mới, tôi sẽ bắt đầu từ mặc định. Đối với những người trưởng thành, tôi sẽ thực hiện di chuyển có đo lường.
146 
147## Trình biên dịch React: loại bỏ tiếng ồn, không suy nghĩ
148 
149React Compiler 1.0 ổn định và Next.js 16 hỗ trợ nó với `reactCompiler`. Lời hứa là sẽ giảm bớt nhiều thao tác ghi nhớ thủ công: ít `memo` hơn, ít `useMemo` hơn, ít `useCallback` được sử dụng "vì an toàn".
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 
162Tôi sẽ không coi nó như bụi ma thuật. Trình biên dịch sẽ giúp ích khi mã tuân thủ tốt các quy tắc React. Nếu các thành phần có tác dụng phụ lạ, đột biến ẩn hoặc hook bị sử dụng không tốt thì cần phải khắc phục trước tiên.
163 
164Cách lành mạnh để thử nó:
165 
1661. cập nhật `eslint-plugin-react-hooks`;
1672. khắc phục các vi phạm thực tế;
1683. kích hoạt nó trên một khu vực được kiểm soát;
1694. đo lường thời gian và hành vi xây dựng;
1705. chỉ xóa ghi nhớ thủ công khi không còn cần thiết.
171 
172Mục tiêu không phải là xóa mọi `useMemo`. Mục đích là ngừng ghi nhớ phòng ngừa vì chúng tôi sợ hiển thị.
173 
174## `proxy.ts` và ranh giới mạng
175 
176`middleware.ts` cũ trở thành `proxy.ts`. Đó là một sự thay đổi tên, nhưng nó có ý nghĩa: tệp đó nằm ở ranh giới yêu cầu, nó không phải là phần mềm trung gian chung kiểu phụ trợ truyền thống.
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 
193Quy tắc ở đây rất đơn giản: giữ nó ở mức nhỏ. Chuyển hướng, định tuyến xác thực, tiêu đề, viết lại cần thiết. Nếu nó bắt đầu có cảm giác giống như một chương trình phụ trợ thứ hai thì có lẽ nó đang làm quá nhiều việc.
194 
195## Làm thế nào tôi thực sự có thể di cư
196 
197Tôi sẽ không bật tất cả các tính năng cùng một lúc. Tôi sẽ làm điều này:
198 
1991. Tôi cập nhật Next, React và React DOM;
2002. Tôi khởi chạy codemod chính thức;
2013. Tôi sửa các thay đổi có thể gây lỗi trên `params`, `searchParams`, `cookies()`, `headers()` và `draftMode()`;
2024. Tôi di chuyển `middleware.ts` sang `proxy.ts`;
2035. Tôi kiểm tra các bản dựng và các trang quan trọng;
2046. Tôi kích hoạt Thành phần bộ đệm trên một phần mà bộ đệm hiện đang tạo ra xung đột;
2057. Tôi xác định các quy ước cho thẻ và tính vô hiệu;
2068. Tôi thử riêng Trình biên dịch React;
2079. so sánh các chỉ số trước và sau.
208 
209Việc di chuyển tốt không phải là việc sử dụng tất cả các tính năng mới. Đó là điều làm cho hoạt động của ứng dụng trở nên dễ đọc hơn.
210 
211## Điều gì thay đổi trong cách suy nghĩ
212 
213Điều hữu ích nhất ở Next.js 16 là nó buộc bạn phải đặt tên cho ý định tốt hơn. Chức năng không chỉ là "lấy sản phẩm từ cơ sở dữ liệu". Đó là "lấy sản phẩm, tôi có thể lưu nó vào bộ nhớ đệm hàng giờ, tôi vô hiệu hóa nó bằng thẻ này". Một thành phần không chỉ là "kết xuất trang". Đó là "đây là phần vỏ nhanh, phần này mang tính cá nhân, phần này phát trực tuyến."
214 
215Lúc đầu có vẻ như có nhiều việc hơn. Sau đó, nó trở thành một hình thức bình tĩnh. Các quyết định về hiệu suất không còn bị ẩn giấu trong sự kết hợp của các giá trị mặc định, phương pháp phỏng đoán và trí nhớ bộ lạc. Chúng nằm trong mật mã.
216 
217## Nguồn hữu ích
218 
219- [Ghi chú phát hành Next.js 16](https://nextjs.org/blog/next-16)
220- [Thành phần bộ nhớ đệm - Tài liệu Next.js](https://nextjs.org/docs/app/getting-started/cache-components)
221- [sử dụng bộ nhớ đệm - Tài liệu Next.js](https://nextjs.org/docs/app/api-reference/directives/use-cache)
222- [Trình biên dịch React v1.0](https://react.dev/blog/2025/10/07/react-compiler-1)
223