1~
2Για χρόνια μια από τις πιο ενοχλητικές ερωτήσεις στο Next.js ήταν: "Είναι αυτή η σελίδα στατική ή δυναμική;". Φαίνεται σαν μια απλή ερώτηση, μέχρι να προσθέσετε μια κλήση στο `cookies()`, ένα `fetch` με διαφορετικές επιλογές, ένα πρόγραμμα-πελάτη βάσης δεδομένων, ένα CMS, ένα καλάθι αγορών ή ένα κομμάτι προσαρμοσμένου περιεχομένου.
3~
4Το Next.js 16 είναι ενδιαφέρον γιατί προσπαθεί να κάνει αυτή τη συζήτηση λιγότερο μυστηριώδη. Δεν εξαλείφει την πολυπλοκότητα, αλλά αλλάζει το νοητικό μοντέλο: οι διαδρομές είναι δυναμικές από προεπιλογή, η κρυφή μνήμη δηλώνει όπου χρειάζεται και το `Suspense` γίνεται ο φυσικός τρόπος για να συνθέσετε γρήγορα κελύφη με μέρη που παραμένουν φρέσκα.
5~
6Το χαρακτηριστικό που πρέπει να κατανοήσετε είναι τα στοιχεία της προσωρινής μνήμης. Το Stable Turbopack, το React Compiler, το `proxy.ts` και τα νέα API ακύρωσης είναι σημαντικά, αλλά περιστρέφονται γύρω από το ίδιο πρόβλημα: δημιουργία γρήγορων εφαρμογών χωρίς να χρειάζεται να μαντέψετε τι αποφάσισε το πλαίσιο στα παρασκήνια.
7~
8## Γιατί αυτό το πράγμα έχει σημασία
9~
10Σε μια πραγματική εφαρμογή δεν έχετε απλώς "στατικές σελίδες" και "δυναμικές σελίδες". Έχετε διαφορετικά κομμάτια με διαφορετικές ανάγκες.
11~
12Το φύλλο προϊόντος μπορεί να αλλάζει μερικές φορές την ημέρα. Η τιμή μπορεί να αλλάζει πιο συχνά. Η διαθεσιμότητα πρέπει να είναι σχεδόν ζωντανή. Το όνομα χρήστη είναι προσωπικό. Οι κριτικές μπορούν να μεταδοθούν σε ροή. Η πλαϊνή μπάρα μπορεί να είναι σταθερή. Το καλάθι όχι.
13~
14Εάν αντιμετωπίζετε τα πάντα ως μια μονάδα, καταλήγετε πάντα σε ένα από τα δύο άκρα:
15~
16- επιθετική προσωρινή αποθήκευση και κίνδυνος εμφάνισης παλαιών δεδομένων.
17- δυναμική απόδοση παντού και απόδοση χειρότερη από όσο χρειάζεται.
18~
19Το Cache Components χρησιμεύει ακριβώς για την αποφυγή αυτής της λανθασμένης επιλογής.
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[Streaming μέσα στο Suspense]
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`. Πολλές εφαρμογές διαβάζουν δεδομένα από Prisma, Drizzle, εσωτερικά 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## Stable Turbopack: το κομμάτι που ακούτε κάθε μέρα
133~
134Το Next.js 16 φέρνει το Turbopack στο κέντρο για ανάπτυξη και κατασκευή. Δεν είναι το πιο ποιητικό χαρακτηριστικό, αλλά είναι αυτό που νιώθεις ενώ εργάζεσαι: διακομιστής που ξεκινά νωρίτερα, ταχύτερη ανανέωση, δομές που σταματούν να αισθάνονται σαν ένα αναγκαστικό διάλειμμα για καφέ.
135~
136Τούτου λεχθέντος, δεν θα μετεγκαταστήσω μια βάση κώδικα γεμάτη προσαρμοσμένες προσθήκες με κλειστά μάτια. θα ελεγχα:
137~
138- τοπική κατασκευή?
139- μη τυποποιημένη εισαγωγή?
140- MDX, SVG και CSS.
141- Απομένουν προσθήκες πακέτου ιστού.
142- κρίσιμες σελίδες?
143- διαφορές στους χρόνους κατασκευής.
144~
145Για νέα έργα, θα ξεκινούσα από την προεπιλογή. Για τους ώριμους, θα έκανα μια μετρημένη μετανάστευση.
146~
147## React Compiler: αφαιρέστε το θόρυβο, όχι τη σκέψη
148~
149Το React Compiler 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Δεν θα το αντιμετώπιζα σαν μαγική σκόνη. Ο μεταγλωττιστής βοηθάει όταν ο κώδικας ακολουθεί καλά τους κανόνες του React. Εάν τα εξαρτήματα έχουν περίεργες παρενέργειες, κρυφές μεταλλάξεις ή κακώς χρησιμοποιημένα άγκιστρα, αυτό πρέπει πρώτα να διορθωθεί.
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`. Είναι μια αλλαγή ονόματος, αλλά είναι λογικό: αυτό το αρχείο βρίσκεται στο όριο αιτήματος, δεν είναι παραδοσιακό γενικό ενδιάμεσο λογισμικό τύπου backend.
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Ο κανόνας εδώ είναι απλός: κρατήστε το μικρό. Ανακατεύθυνση, δρομολόγηση εξουσιοδότησης, κεφαλίδες, βασικές επανεγγραφές. Αν αρχίσει να φαίνεται σαν δεύτερο backend, μάλλον κάνει πάρα πολλά.
194~
195## Πώς πραγματικά θα μεταναστεύσω
196~
197Δεν θα ενεργοποιούσα όλες τις λειτουργίες ταυτόχρονα. Θα έκανα αυτό:
198~
1991. Ενημερώνω το Next, το React και το React DOM.
2002. Ξεκινάω το επίσημο codemod.
2013. Διορθώνω τις αλλαγές σπασίματος στα `params`, `searchParams`, `cookies()`, `headers()` και `draftMode()`;
2024. Κάνω μετεγκατάσταση `middleware.ts` σε `proxy.ts`;
2035. Ελέγχω κατασκευές και κρίσιμες σελίδες.
2046. Ενεργοποιώ τα στοιχεία προσωρινής μνήμης σε μια ενότητα όπου η κρυφή μνήμη δημιουργεί τριβή.
2057. Ορίζω συμβάσεις για ετικέτες και ακύρωση.
2068. Δοκιμάζω το React Compiler ξεχωριστά.
2079. σύγκριση μετρήσεων πριν και μετά.
208~
209Η καλή μετανάστευση δεν είναι αυτή που χρησιμοποιεί όλες τις νέες δυνατότητες. Αυτό είναι που κάνει τη συμπεριφορά της εφαρμογής πιο ευανάγνωστη.
210~
211## Τι αλλάζει στον τρόπο σκέψης
212~
213Το πιο χρήσιμο πράγμα για το Next.js 16 είναι ότι σας αναγκάζει να ονομάσετε καλύτερα τις προθέσεις. Μια συνάρτηση δεν είναι απλώς "πάρτε το προϊόν από τη βάση δεδομένων". Είναι "πάρτε το προϊόν, μπορώ να το κάνω cache για ώρες, το ακυρώνω με αυτήν την ετικέτα". Ένα στοιχείο δεν είναι απλώς "απόδοση της σελίδας". Είναι "αυτό είναι το γρήγορο κέλυφος, αυτό το κομμάτι είναι προσωπικό, αυτό έρχεται σε ροή."
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- [React Compiler v1.0](https://react.dev/blog/2025/10/07/react-compiler-1)
223~