CSR έναντι SSR έναντι SSG έναντι streaming: οι συμβιβασμοί απόδοσης;

Question

IT Interview Practice · Accepted Answer

Η στρατηγική rendering αποφασίζει *πού και πότε* χτίζεται το HTML, κάτι που καθορίζει τις μετρικές φόρτωσης. Δεν υπάρχει καθολικά καλύτερη — ταιριάξτε τη με το πόσο δυναμικό και εξατομικευμένο είναι το περιεχόμενο.

## Οι στρατηγικές

```text
CSR      Server sends near-empty HTML + JS ──▶ browser fetches data ──▶ renders   (slow first paint)
SSR      Server renders full HTML per request ──▶ browser shows it ──▶ hydrates   (fresh, TTFB cost)
SSG      HTML built ONCE at deploy ──▶ served from CDN ──▶ hydrates               (fastest, static)
Stream   Server flushes HTML in chunks as ready ──▶ shell first, data fills in    (fast TTFB + fresh)
```

- **CSR (client-side)** — στέλνετε ένα άδειο shell + JS· ο browser κατεβάζει τα δεδομένα και κάνει render. Φθηνό στο hosting, αλλά κακό LCP και SEO επειδή το περιεχόμενο περιμένει το JS.
- **SSR (server-side)** — render πλήρους HTML ανά request. Γρήγορο, φιλικό προς SEO πρώτο paint και πάντα φρέσκο, αλλά προσθέτει TTFB (εργασία server ανά request) και εξακολουθεί να χρειάζεται hydration.
- **SSG (static)** — render κατά το build time, σερβίρισμα από CDN. Καλύτερο TTFB/LCP, αλλά το περιεχόμενο είναι τόσο φρέσκο όσο το τελευταίο σας build· το **ISR** προσθέτει περιοδικά/on-demand rebuilds.
- **Streaming SSR** — flush του HTML shell άμεσα και streaming των πιο αργών μερών (React Suspense / `renderToPipeableStream`) ώστε οι χρήστες να βλέπουν περιεχόμενο ενώ φορτώνουν τα δεδομένα.

## Επιλογή

| Περιεχόμενο | Καλύτερη επιλογή |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Εξατομικευμένο, ανά request | SSR / streaming |
| Έντονα διαδραστική εφαρμογή πίσω από auth | CSR ή SSR + islands |

## Το κόστος hydration (κοινή παγίδα)

Τα SSR/SSG κάνουν paint γρήγορα αλλά η σελίδα δεν είναι διαδραστική μέχρι το JS να κάνει **hydrate** — ένα κενό όπου το INP υποφέρει. Το partial/progressive hydration και τα React Server Components υπάρχουν για να στέλνουν λιγότερο client JS και να μικραίνουν αυτό το κενό.

## Γιατί έχει σημασία

Από τους senior αναμένεται να συλλογίζονται αυτόν τον συμβιβασμό ανά επιφάνεια, όχι να επιλέγουν δογματικά μία. Η οξεία διαπίστωση: το γρήγορο paint (SSR/SSG) δεν σημαίνει γρήγορη interactivity — το hydration είναι ο κρυφός φόρος, και το streaming + τα server components είναι η σύγχρονη απάντηση για να πετύχετε και τα δύο.

Περιεχόμενο	Καλύτερη επιλογή
Marketing, docs, blog	SSG (+ ISR)
Εξατομικευμένο, ανά request	SSR / streaming
Έντονα διαδραστική εφαρμογή πίσω από auth	CSR ή SSR + islands

Οι στρατηγικές

Επιλογή

Το κόστος hydration (κοινή παγίδα)

Γιατί έχει σημασία

Σχετικές ερωτήσεις