Next.js 16, Thành phần bộ đệm và Trình biên dịch React: điều gì thực sự thay đổi

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

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~

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

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.

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.

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.

8## Bởi vì điều này quan trọng

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~