1 
2Selama bertahun-tahun, salah satu pertanyaan paling menjengkelkan di Next.js adalah: "Apakah halaman ini statis atau dinamis?". Sepertinya pertanyaan sederhana, sampai Anda menambahkan panggilan ke `cookies()`, `fetch` dengan opsi berbeda, klien database, CMS, keranjang belanja, atau konten khusus.
3 
4Next.js 16 menarik karena mencoba membuat percakapan ini tidak terlalu misterius. Ini tidak menghilangkan kompleksitas, tetapi mengubah model mental: rute bersifat dinamis secara default, cache mendeklarasikan dirinya sendiri jika diperlukan, dan `Suspense` menjadi cara alami untuk menyusun shell cepat dengan bagian-bagian yang tetap segar.
5 
6Fitur yang perlu dipahami adalah Cache Components. Turbopack Stabil, React Compiler, `proxy.ts`, dan API invalidasi baru memang penting, namun semuanya berkisar pada masalah yang sama: membangun aplikasi cepat tanpa harus menebak apa yang diputuskan oleh framework di balik layar.
7 
8## Karena hal ini penting
9 
10Dalam aplikasi nyata Anda tidak hanya memiliki "halaman statis" dan "halaman dinamis". Anda memiliki bagian berbeda dengan kebutuhan berbeda.
11 
12Lembar produk dapat berubah beberapa kali sehari. Harga mungkin akan lebih sering berubah. Ketersediaan harus hampir aktif. Nama pengguna bersifat pribadi. Ulasan dapat dialirkan. Sidebar bisa stabil. Gerobak tidak.
13 
14Jika Anda memperlakukan segala sesuatu sebagai satu kesatuan, Anda selalu berakhir di salah satu dari dua ekstrem:
15 
16- caching yang agresif dan risiko melihat data lama;
17- rendering dinamis di mana-mana dan kinerja lebih buruk dari yang diperlukan.
18 
19Komponen Cache berfungsi tepat untuk menghindari pilihan yang salah ini.
20 
21## Model dalam praktiknya
22 
23Dengan `cacheComponents: true`, Anda dapat mendeklarasikan apa yang dapat di-cache menggunakan `"use cache"`. Kemudian Anda dapat mengaitkan durasi dan tag dengan `cacheLife()` dan `cacheTag()`. Bagian dinamis tetap dinamis dan dapat diisolasi dengan `Suspense`.
24 
25```mermaid
26flowchart TD
27    Request[Permintaan pengguna] --> Shell[Cangkang yang di-cache]
28    Request --> Dynamic[Bagian dinamis]
29    Shell --> FirstPaint[Konten cepat pertama]
30    Dynamic --> Stream[Streaming di dalam Suspense]
31    Stream --> Complete[Halaman penuh]
32```
33 
34Pengaturannya kecil:
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 
47Perubahan besar bukan pada konfigurasinya. Itu tergantung bagaimana Anda mulai menulis komponen.
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 
93Halaman tidak harus semuanya di-cache atau dinamis. Lembar produk dapat dibuat dengan cepat dan dapat digunakan kembali. Persediaan bisa tetap segar. Pengguna langsung melihat sesuatu, tanpa menunggu bagian paling lambat.
94 
95## `use cache` adalah dokumentasi yang dapat dieksekusi
96 
97Hal yang saya suka tentang `"use cache"` adalah ia memaksa Anda untuk menyatakan niat secara eksplisit. Saat Anda membaca suatu fungsi, Anda langsung memahami bahwa seseorang telah memutuskan: "data ini dapat digunakan kembali".
98 
99Ini sangat berguna ketika Anda tidak menggunakan `fetch`. Banyak aplikasi membaca data dari Prisma, Gerimis, SDK internal, klien CMS, atau fungsi layanan. Dalam kasus tersebut, alasan lama yang hanya didasarkan pada opsi `fetch` tidaklah cukup.
100 
101Aturan praktisnya:
102 
103- konten cachea relatif stabil;
104- gunakan tag granular;
105- meninggalkan izin dinamis, sesi, keranjang, pemberitahuan, dan status transaksional;
106- masukkan bagian yang lambat ke dalam `Suspense`;
107- mengukur sebelum mengatakan "kami meningkatkan kinerja".
108 
109## Batalkan tanpa membuang semuanya
110 
111Cache hanya berguna jika Anda dapat memperbaruinya secara akurat. Di sini `cacheTag`, `revalidateTag` dan `updateTag` menjadi penting.
112 
113Contoh:
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 
130Detail penting adalah tagnya. `product:${productId}` memberi tahu batasan yang tepat. `products` menceritakan sebuah ember besar. Pada awalnya ember besar itu terasa nyaman; setelah beberapa bulan itu menjadi alasan Anda membatalkan setengah aplikasi untuk mengubah judul.
131 
132## Turbopack Stabil: bagian yang Anda dengar setiap hari
133 
134Next.js 16 menghadirkan Turbopack ke pusat pengembangan dan pembangunan. Ini bukan fitur yang paling puitis, tapi itulah yang Anda rasakan saat bekerja: server yang dimulai lebih awal, penyegaran lebih cepat, build yang berhenti terasa seperti rehat kopi yang dipaksakan.
135 
136Meskipun demikian, saya tidak akan memigrasikan basis kode yang penuh dengan plugin khusus dengan mata tertutup. Saya akan memeriksa:
137 
138- bangunan lokal;
139- impor nonstandar;
140- MDX, SVG dan CSS;
141- Plugin Webpack tersisa;
142- halaman penting;
143- perbedaan waktu pembuatan.
144 
145Untuk proyek baru, saya akan memulai dari default. Untuk yang sudah dewasa, saya akan melakukan migrasi terukur.
146 
147## React Compiler: menghilangkan kebisingan, bukan pikiran
148 
149React Compiler 1.0 stabil dan Next.js 16 mendukungnya dengan `reactCompiler`. Janjinya adalah untuk mengurangi banyak memoisasi manual: lebih sedikit `memo`, lebih sedikit `useMemo`, lebih sedikit `useCallback` digunakan "untuk keamanan".
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 
162Saya tidak akan memperlakukannya seperti debu ajaib. Kompiler membantu ketika kode mengikuti aturan React dengan baik. Jika komponen memiliki efek samping yang aneh, mutasi tersembunyi, atau kaitan yang digunakan secara buruk, hal ini perlu diperbaiki terlebih dahulu.
163 
164Cara sehat untuk mencobanya:
165 
1661. perbarui `eslint-plugin-react-hooks`;
1672. memperbaiki pelanggaran yang sebenarnya;
1683. aktifkan di area yang terkendali;
1694. mengukur waktu dan perilaku pembangunan;
1705. hapus memoisasi manual hanya jika tidak lagi diperlukan.
171 
172Tujuannya bukan untuk menghapus setiap `useMemo`. Tujuannya adalah berhenti menulis memoisasi preventif karena takut rendering.
173 
174## `proxy.ts` dan batas jaringan
175 
176`middleware.ts` yang lama menjadi `proxy.ts`. Ini adalah perubahan nama, tetapi masuk akal: file itu berada di batas permintaan, ini bukan middleware generik bergaya backend tradisional.
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 
193Aturannya di sini sederhana: jaga agar tetap kecil. Pengalihan, perutean autentikasi, header, penulisan ulang penting. Jika mulai terasa seperti backend kedua, mungkin fungsinya terlalu banyak.
194 
195## Bagaimana saya benar-benar akan bermigrasi
196 
197Saya tidak akan mengaktifkan semua fitur sekaligus. Saya akan melakukan ini:
198 
1991. Saya memperbarui Berikutnya, Bereaksi dan Bereaksi DOM;
2002. Saya meluncurkan codemod resmi;
2013. Saya memperbaiki perubahan yang mengganggu pada `params`, `searchParams`, `cookies()`, `headers()` dan `draftMode()`;
2024. Saya memigrasikan `middleware.ts` ke `proxy.ts`;
2035. Saya memeriksa bangunan dan halaman penting;
2046. Saya mengaktifkan Komponen Cache di bagian tempat cache saat ini menimbulkan gesekan;
2057. Saya mendefinisikan konvensi untuk tag dan pembatalan;
2068. Saya mencoba React Compiler secara terpisah;
2079. perbandingan metrik sebelum dan sesudah.
208 
209Migrasi yang baik bukanlah yang menggunakan semua fitur baru. Hal inilah yang membuat perilaku aplikasi lebih mudah dibaca.
210 
211## Apa yang mengubah cara berpikir
212 
213Hal yang paling berguna tentang Next.js 16 adalah memaksa Anda menyebutkan niat dengan lebih baik. Suatu fungsi bukan sekedar "mendapatkan produk dari database". Ini adalah "dapatkan produknya, saya dapat menyimpannya dalam cache selama berjam-jam, saya membatalkannya dengan tag ini". Sebuah komponen bukan sekedar "render halaman". Itu adalah "ini cangkang cepatnya, bagian ini bersifat pribadi, ini datang secara streaming."
214 
215Pada awalnya sepertinya lebih banyak pekerjaan. Kemudian menjadi suatu bentuk ketenangan. Keputusan kinerja tidak lagi tersembunyi dalam kombinasi default, heuristik, dan memori suku. Mereka ada di dalam kode.
216 
217## Sumber yang bermanfaat
218 
219- [Catatan rilis Next.js 16](https://nextjs.org/blog/next-16)
220- [Komponen Cache - Dokumen Next.js](https://nextjs.org/docs/app/getting-started/cache-components)
221- [gunakan cache - dokumen Next.js](https://nextjs.org/docs/app/api-reference/directives/use-cache)
222- [Kompiler Bereaksi v1.0](https://react.dev/blog/2025/10/07/react-compiler-1)
223