Αυτές είναι οι τρεις κύριες στρατηγικές για το πότε δημιουργείται το HTML μιας σελίδας. Η επιλογή του σωστού για κάθε σελίδα ισορροπεί τη φρεσκάδα, την απόδοση και το κόστος του διακομιστή.
() {
posts = (, { : }).( r.());
;
}
Η σελίδα pre-render σε στατικό HTML κατά τη build και αποθηκεύεται σε cache στο CDN. Ταχύτατη δυνατή παράδοση, αλλά το περιεχόμενο παγώνεται έως την επόμενη build. Καλύτερο για περιεχόμενο που σπάνια αλλάζει: σελίδες marketing, τεκμηρίωση, αναρτήσεις blog.
// HTML generated FRESH on every request
export default async function Page() {
const data = await fetch("...", { cache: "no-store" }).then(r => r.json());
return <Dashboard data={data} />;
}
Ο διακομιστής render τη σελίδα ανά αίτημα, οπότε τα δεδομένα είναι πάντα τρέχοντα — εις βάρος πιο αργών απαντήσεων και φόρτου διακομιστή σε κάθε επίσκεψη. Καλύτερο για προσωποποιημένα ή πάντα-ενημερωμένα δεδομένα: dashboards, σελίδες λογαριασμού, αποτελέσματα αναζήτησης.
// Static, but automatically rebuilt in the background every N seconds
export const revalidate = 60; // regenerate at most once per 60s
export default async function Page() {
const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json());
return <Products items={products} />;
}
Το ISR εξυπηρετεί στατικό HTML (γρήγορο, cached σε CDN) αλλά το revalidates στο background σε ένα πρόγραμμα — οπότε παίρνετε στατική απόδοση με περιοδικά φρέσκα δεδομένα, χωρίς να χρειάζεται να ξανακατασκευάσετε ολόκληρο το site. Καλύτερο για περιεχόμενο που αλλάζει περιστασιακά: λίστες προϊόντων, ειδήσεις, πίνακες κατάταξης.
Speed Freshness Server cost Use for
SSG fastest build-time only none docs, marketing
SSR slower always fresh every request dashboards, personalized
ISR fast every N seconds occasional catalogs, news
Στο App Router επιλέγετε αυτά ανά-fetch μέσω επιλογών cache (force-cache = SSG, no-store = SSR, revalidate = ISR) παρά special functions.
Το να καταλαβαίνετε το trade-off — το στατικό είναι γρηγορότερο αλλά παλιό, το SSR είναι φρέσκο αλλά δαπανηρό, το ISR ισορροπεί και τα δύο — σας επιτρέπει να βελτιστοποιήσετε κάθε σελίδα για το σωστό μείγμα απόδοσης και φρεσκάδας δεδομένων.