Streaming & Suspense Next.js: Οδηγός 2026

Εισαγωγή: Γιατί Αξίζει να Κατανοήσετε τις Σύγχρονες Στρατηγικές Rendering

Αν δουλεύετε με Next.js εδώ και κάποιο καιρό, πιθανότατα έχετε ζήσει αυτό: ο χρήστης ανοίγει μια σελίδα, περιμένει... περιμένει... και τελικά εμφανίζεται τα πάντα μαζί. Ή χειρότερα, βλέπει μια λευκή οθόνη μέχρι ο server να ολοκληρώσει όλα τα data fetches. Ειλικρινά, αυτό ήταν το μεγαλύτερο πρόβλημα του παραδοσιακού SSR.

Η εξέλιξη του web rendering πέρασε από πολλά στάδια. Από τις πρώτες μέρες του Server-Side Rendering, όπου κάθε σελίδα χτιζόταν ολόκληρη στον server πριν σταλεί στον browser, μέχρι το Static Site Generation που δημιουργούσε στατικές σελίδες κατά το build time — κάθε προσέγγιση είχε τα πλεονεκτήματα και τους περιορισμούς της.

Σήμερα, με το Next.js 15 και 16, μπαίνουμε σε μια νέα εποχή. Τεχνολογίες όπως το Streaming, το React Suspense και το Partial Prerendering (PPR) αλλάζουν ριζικά τον τρόπο που σκεφτόμαστε για την απόδοση.

Σκεφτείτε το εξής: αν μια σελίδα χρειάζεται δεδομένα από πολλαπλές πηγές — πληροφορίες προϊόντος, αξιολογήσεις χρηστών, προτάσεις — ο χρήστης δεν χρειάζεται να περιμένει μέχρι να ολοκληρωθεί και το πιο αργό request. Αυτό ήταν πάντα το θεμελιώδες πρόβλημα, και τώρα έχουμε πραγματική λύση.

Λοιπόν, ας δούμε τι κάνει κάθε τεχνολογία. Το Streaming επιτρέπει στον server να στέλνει HTML σε κομμάτια (chunks) καθώς γίνονται διαθέσιμα. Το React Suspense παρέχει τον μηχανισμό για να ορίσουμε πού η εφαρμογή μπορεί να "αναμείνει" δεδομένα, δείχνοντας ενδιάμεσο περιεχόμενο. Και το Partial Prerendering (PPR) συνδυάζει τα πλεονεκτήματα του στατικού και του δυναμικού rendering σε μία ενιαία στρατηγική.

Σε αυτόν τον οδηγό θα εξερευνήσουμε διεξοδικά κάθε μία από αυτές τις τεχνολογίες, με πρακτικά παραδείγματα κώδικα που μπορείτε να εφαρμόσετε αμέσως.

Τι Είναι το Streaming στο Next.js

Το Streaming είναι μια τεχνική μεταφοράς δεδομένων που επιτρέπει στον server να στέλνει το περιεχόμενο μιας σελίδας σταδιακά, αντί να περιμένει μέχρι να είναι ολόκληρη έτοιμη. Στο πλαίσιο του Next.js και των React Server Components, ο browser αρχίζει να εμφανίζει μέρη της σελίδας ενώ τα υπόλοιπα ακόμη φορτώνονται. Κι αυτό κάνει τεράστια διαφορά στο UX.

Πώς Λειτουργεί Τεχνικά το HTTP Streaming

Στο παραδοσιακό SSR, η ροή είναι απλή: ο browser στέλνει request, ο server επεξεργάζεται τα πάντα, και στέλνει πίσω ένα ενιαίο HTML response. Με το Streaming, ο server χρησιμοποιεί HTTP chunked transfer encoding για να στέλνει τμήματα HTML καθώς αυτά γίνονται διαθέσιμα.

Η διαδικασία λειτουργεί ως εξής:

Ο server αρχίζει να στέλνει αμέσως το HTML shell (header, navigation, layout) — δηλαδή ό,τι είναι ήδη έτοιμο.
Στα σημεία που απαιτούν δεδομένα, εισάγονται placeholder elements (fallback UI) αντί του τελικού περιεχομένου.
Καθώς κάθε τμήμα δεδομένων γίνεται διαθέσιμο, ο server στέλνει ένα νέο chunk HTML μαζί με ένα μικρό <script> tag που αντικαθιστά το placeholder.
Ο browser ενημερώνει προοδευτικά τη σελίδα — χωρίς ανανέωση.

Η Διαφορά με το Παραδοσιακό SSR

Για να γίνει πιο ξεκάθαρο, δείτε τη σύγκριση:

Παραδοσιακό SSR: TTFB = χρόνος του πιο αργού data fetch. Ο χρήστης βλέπει λευκή σελίδα μέχρι να ολοκληρωθούν όλα τα requests.
Streaming SSR: TTFB = χρόνος δημιουργίας του αρχικού shell (συνήθως μερικά milliseconds). Ο χρήστης βλέπει αμέσως τη δομή της σελίδας με loading indicators, και το περιεχόμενο εμφανίζεται σταδιακά.

Και εδώ είναι το πραγματικά ωραίο: στο Next.js App Router, το Streaming είναι ενεργοποιημένο από προεπιλογή για τα React Server Components. Δεν χρειάζεται καμία ειδική ρύθμιση — αρκεί να χρησιμοποιήσουμε Suspense boundaries σωστά.

React Suspense στο Next.js App Router

Το React Suspense είναι ο μηχανισμός που ενεργοποιεί το Streaming στο Next.js. Ουσιαστικά, ορίζει τα σημεία στη σελίδα μας όπου το περιεχόμενο μπορεί να φορτωθεί ασύγχρονα, εμφανίζοντας στο μεταξύ ένα fallback UI — συνήθως ένα loading skeleton ή spinner.

Πρώτη Προσέγγιση: Αυτόματο Suspense με loading.tsx

Το Next.js App Router παρέχει έναν αυτόματο μηχανισμό Suspense μέσω του αρχείου loading.tsx. Κάθε route segment μπορεί να έχει το δικό του αρχείο loading που εμφανίζεται αυτόματα ενώ το περιεχόμενο φορτώνει.

// app/products/loading.tsx
// Αυτόματο loading UI για το route /products

export default function ProductsLoading() {
  return (
    <div className="space-y-4">
      <div className="h-8 w-64 bg-gray-200 animate-pulse rounded" />
      <div className="grid grid-cols-3 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="h-48 bg-gray-200 animate-pulse rounded-lg" />
        ))}
      </div>
    </div>
  );
}

// app/products/page.tsx
// Η σελίδα προϊόντων — το loading.tsx εμφανίζεται αυτόματα
// μέχρι αυτό το component να ολοκληρώσει το rendering

import { getProducts } from '@/lib/api';

export default async function ProductsPage() {
  // Αυτό το await ενεργοποιεί αυτόματα το loading.tsx
  const products = await getProducts();

  return (
    <div>
      <h1>Προϊόντα</h1>
      <div className="grid grid-cols-3 gap-4">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

Το loading.tsx τυλίγει αυτόματα το page.tsx σε ένα Suspense boundary. Αυτό σημαίνει ότι ολόκληρη η σελίδα αντικαθίσταται με το loading UI μέχρι να ολοκληρωθεί. Είναι χρήσιμο, αλλά μπορεί να μην είναι αρκετά granular για πολύπλοκες σελίδες.

Δεύτερη Προσέγγιση: Χειροκίνητο Suspense με Components

Εδώ τα πράγματα γίνονται πιο ενδιαφέροντα. Για πιο λεπτομερή έλεγχο, μπορούμε να χρησιμοποιήσουμε το <Suspense> component απευθείας μέσα στη σελίδα μας. Αυτό μας επιτρέπει να ορίσουμε πολλαπλά ανεξάρτητα loading boundaries — κάθε τμήμα φορτώνει ανεξάρτητα.

// app/products/[id]/page.tsx
// Σελίδα προϊόντος με πολλαπλά Suspense boundaries

import { Suspense } from 'react';
import ProductDetails from '@/components/ProductDetails';
import ProductReviews from '@/components/ProductReviews';
import RecommendedProducts from '@/components/RecommendedProducts';
import {
  ProductDetailsSkeleton,
  ReviewsSkeleton,
  RecommendationsSkeleton
} from '@/components/Skeletons';

export default function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <div className="max-w-7xl mx-auto px-4">
      {/* Τα στοιχεία του προϊόντος φορτώνουν πρώτα */}
      <Suspense fallback={<ProductDetailsSkeleton />}>
        <ProductDetails productId={id} />
      </Suspense>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
        {/* Οι αξιολογήσεις φορτώνουν ανεξάρτητα */}
        <div className="lg:col-span-2">
          <Suspense fallback={<ReviewsSkeleton />}>
            <ProductReviews productId={id} />
          </Suspense>
        </div>

        {/* Οι προτάσεις φορτώνουν επίσης ανεξάρτητα */}
        <div>
          <Suspense fallback={<RecommendationsSkeleton />}>
            <RecommendedProducts productId={id} />
          </Suspense>
        </div>
      </div>
    </div>
  );
}

Με αυτή την προσέγγιση, κάθε section φορτώνει ανεξάρτητα. Αν οι αξιολογήσεις χρειάζονται 3 δευτερόλεπτα αλλά οι λεπτομέρειες του προϊόντος μόνο 200ms, ο χρήστης βλέπει τις λεπτομέρειες σχεδόν αμέσως ενώ ένα skeleton εμφανίζεται στη θέση των αξιολογήσεων. Αυτό είναι τεράστια βελτίωση.

Τα Async Server Components ως Μηχανισμός Streaming

Στο Next.js App Router, τα Server Components μπορούν να είναι async functions. Όταν ένα async component βρίσκεται μέσα σε Suspense boundary, το Next.js αυτόματα κάνει stream το αποτέλεσμα:

// components/ProductReviews.tsx
// Async Server Component — κάνει fetch δεδομένα στον server

import { getReviews } from '@/lib/api';
import { StarRating } from '@/components/StarRating';

export default async function ProductReviews({
  productId,
}: {
  productId: string;
}) {
  // Αυτό το await "μπλοκάρει" μόνο αυτό το component
  // Ο υπόλοιπος κώδικας της σελίδας δεν επηρεάζεται
  const reviews = await getReviews(productId);

  return (
    <section>
      <h2 className="text-2xl font-bold mb-4">
        Αξιολογήσεις ({reviews.length})
      </h2>
      <div className="space-y-4">
        {reviews.map((review) => (
          <article key={review.id} className="border rounded-lg p-4">
            <div className="flex items-center justify-between">
              <span className="font-semibold">{review.author}</span>
              <StarRating rating={review.rating} />
            </div>
            <p className="mt-2 text-gray-600">{review.content}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

Παράλληλη Φόρτωση Δεδομένων

Ένα από τα πιο συχνά (και πιο εκνευριστικά) προβλήματα απόδοσης στις web εφαρμογές είναι τα request waterfalls — τα διαδοχικά requests όπου το καθένα περιμένει το προηγούμενο να ολοκληρωθεί. Ευτυχώς, το Next.js μας δίνει πολλούς τρόπους να αποφύγουμε αυτό.

Το Πρόβλημα: Διαδοχικά Requests (Waterfall)

// ❌ ΛΑΘΟΣ: Διαδοχικά requests — κάθε await μπλοκάρει το επόμενο
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  // Πρώτα φορτώνει το προϊόν (500ms)
  const product = await getProduct(id);

  // Μετά τις αξιολογήσεις (800ms)
  const reviews = await getReviews(id);

  // Τέλος τις προτάσεις (600ms)
  const recommendations = await getRecommendations(id);

  // Συνολικός χρόνος: 500 + 800 + 600 = 1900ms 😱
  return (
    <div>
      <ProductInfo product={product} />
      <ReviewsList reviews={reviews} />
      <Recommendations items={recommendations} />
    </div>
  );
}

Βλέπετε το πρόβλημα; Σχεδόν 2 δευτερόλεπτα αναμονής, ενώ τα requests θα μπορούσαν να τρέχουν παράλληλα.

Λύση 1: Παράλληλα Requests με Promise.all

// ✅ ΣΩΣΤΟ: Παράλληλα requests με Promise.all
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  // Όλα τα requests ξεκινούν ταυτόχρονα
  const [product, reviews, recommendations] = await Promise.all([
    getProduct(id),        // 500ms
    getReviews(id),        // 800ms
    getRecommendations(id) // 600ms
  ]);

  // Συνολικός χρόνος: max(500, 800, 600) = 800ms ✨
  return (
    <div>
      <ProductInfo product={product} />
      <ReviewsList reviews={reviews} />
      <Recommendations items={recommendations} />
    </div>
  );
}

Λύση 2: Ανεξάρτητα Components με Suspense (Streaming Pattern)

Αυτή είναι, κατά τη γνώμη μου, η καλύτερη λύση. Συνδυάζει παράλληλα requests και streaming. Αντί να χρησιμοποιήσουμε Promise.all σε ένα component, σπάμε τα δεδομένα σε ανεξάρτητα async components:

// ✅ ΒΕΛΤΙΣΤΟ: Κάθε component φορτώνει ανεξάρτητα και κάνει stream
// Η σελίδα εμφανίζεται σταδιακά — κάθε τμήμα μόλις είναι έτοιμο

import { Suspense } from 'react';

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <div>
      {/* Κάθε Suspense boundary κάνει stream ανεξάρτητα */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductDetails productId={id} />
      </Suspense>

      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={id} />
      </Suspense>

      <Suspense fallback={<RecommendationsSkeleton />}>
        <RecommendedProducts productId={id} />
      </Suspense>
    </div>
  );
}

// Χρόνος μέχρι πλήρη εμφάνιση: max(500, 800, 600) = 800ms
// Χρόνος μέχρι πρώτο περιεχόμενο: min(500, 800, 600) = 500ms ⚡

Αυτή η τεχνική είναι η πιο αποδοτική γιατί ο χρήστης βλέπει κάθε τμήμα μόλις γίνει διαθέσιμο, χωρίς να περιμένει τα υπόλοιπα. Κάθε async Server Component μέσα σε Suspense boundary κάνει fetch τα δεδομένα του ανεξάρτητα — και παράλληλα.

Partial Prerendering (PPR)

Τώρα μπαίνουμε στο πραγματικά συναρπαστικό κομμάτι. Το Partial Prerendering είναι μια πρωτοποριακή στρατηγική rendering που εισήχθη στο Next.js 14 ως πειραματική λειτουργία και βελτιώθηκε σημαντικά στις εκδόσεις 15 και 16. Αντιπροσωπεύει μια θεμελιώδη αλλαγή: αντί να επιλέγουμε μία στρατηγική ανά route, μπορούμε να συνδυάσουμε στατικό και δυναμικό rendering στην ίδια σελίδα.

Πώς Λειτουργεί το PPR

Η βασική ιδέα είναι εκπληκτικά κομψή:

Στατικό Shell: Κατά το build time, το Next.js δημιουργεί ένα στατικό HTML shell — τη δομή της σελίδας, τα navigation elements, το layout, και ό,τι δεν εξαρτάται από δυναμικά δεδομένα.
Δυναμικά Holes: Στα σημεία που υπάρχουν Suspense boundaries με δυναμικό περιεχόμενο, το PPR εισάγει "τρύπες" (holes) στο στατικό HTML, μαζί με τα fallback UI.
Streaming κατά το Request: Όταν ένας χρήστης ζητά τη σελίδα, το στατικό shell σερβίρεται αμέσως από το CDN/edge, και τα δυναμικά τμήματα κάνουν stream στον browser καθώς γίνονται διαθέσιμα.

Το αποτέλεσμα; Ο TTFB είναι πρακτικά ισοδύναμος με αυτόν μιας στατικής σελίδας, ενώ παράλληλα η σελίδα περιέχει πλήρως δυναμικό περιεχόμενο. Κάτι που μέχρι πρόσφατα φαινόταν σχεδόν αδύνατο.

Ρύθμιση PPR στο Next.js 15/16

Για να ενεργοποιήσετε το PPR, πρέπει πρώτα να το δηλώσετε στο next.config.ts:

// next.config.ts
// Ενεργοποίηση PPR στο Next.js 15/16

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    // Στο Next.js 15: ενεργοποίηση incremental PPR
    ppr: 'incremental',
  },
};

export default nextConfig;

Στη συνέχεια, ενεργοποιούμε το PPR σε επίπεδο route:

// app/products/[id]/page.tsx
// Σελίδα με ενεργοποιημένο PPR

import { Suspense } from 'react';
import ProductDetails from '@/components/ProductDetails';
import ProductReviews from '@/components/ProductReviews';
import StaticSidebar from '@/components/StaticSidebar';

// Ενεργοποίηση PPR για αυτό το route
export const experimental_ppr = true;

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <div className="flex gap-8">
      {/* Αυτό το τμήμα θα είναι στατικό — prerendered στο build */}
      <StaticSidebar />

      <main className="flex-1">
        {/* Αυτά τα Suspense boundaries ορίζουν δυναμικά "holes" */}
        <Suspense fallback={<ProductDetailsSkeleton />}>
          <ProductDetails productId={id} />
        </Suspense>

        <Suspense fallback={<ReviewsSkeleton />}>
          <ProductReviews productId={id} />
        </Suspense>
      </main>
    </div>
  );
}

Στο παράδειγμα αυτό, το StaticSidebar και ολόκληρο το layout γίνονται prerender κατά το build time. Τα components μέσα στα Suspense boundaries κάνουν stream δυναμικά κατά το request time. Ο χρήστης βλέπει αμέσως ένα πλήρες shell με loading skeletons, και το περιεχόμενο εμφανίζεται σταδιακά.

Η Οδηγία "use cache" στο Next.js 16

Στο Next.js 16 εισάγεται η οδηγία "use cache" ως νέος μηχανισμός caching που αντικαθιστά τις παλαιότερες μεθόδους. Σε συνδυασμό με το PPR, μας επιτρέπει να ελέγχουμε λεπτομερώς ποιο περιεχόμενο αποθηκεύεται στη μνήμη cache — και για πόσο καιρό.

Cache Components στο Next.js 16

Αυτό είναι ίσως η μεγαλύτερη αλλαγή που έφερε το Next.js 16. Ένα εντελώς νέο μοντέλο caching βασισμένο στην οδηγία "use cache". Σε αντίθεση με τις προηγούμενες εκδόσεις — όπου το caching γινόταν αυτόματα σε πολλά επίπεδα (κάτι που, ας είμαστε ειλικρινείς, οδηγούσε σε αρκετή σύγχυση) — το νέο μοντέλο είναι ρητό και προβλέψιμο. Τίποτα δεν αποθηκεύεται στο cache εκτός αν το ζητήσουμε ρητά.

Caching σε Επίπεδο Σελίδας

// app/about/page.tsx
// Ολόκληρη η σελίδα αποθηκεύεται στο cache
"use cache";

export default async function AboutPage() {
  const teamMembers = await getTeamMembers();

  return (
    <div>
      <h1>Σχετικά με εμάς</h1>
      <div className="grid grid-cols-3 gap-4">
        {teamMembers.map((member) => (
          <TeamMemberCard key={member.id} member={member} />
        ))}
      </div>
    </div>
  );
}

Caching σε Επίπεδο Component

// components/PopularProducts.tsx
// Μόνο αυτό το component αποθηκεύεται στο cache
"use cache";

import { cacheTag } from 'next/cache';

export default async function PopularProducts() {
  // Ορίζουμε tags για στοχευμένο invalidation
  cacheTag('popular-products');

  const products = await getPopularProducts();

  return (
    <section>
      <h2>Δημοφιλή Προϊόντα</h2>
      <div className="grid grid-cols-4 gap-4">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </section>
  );
}

Caching σε Επίπεδο Συνάρτησης

// lib/data.ts
// Caching σε επίπεδο data-fetching function

import { cacheTag, cacheLife } from 'next/cache';

export async function getProduct(id: string) {
  "use cache";

  // Tag για στοχευμένο invalidation αυτού του προϊόντος
  cacheTag(`product-${id}`);

  // Ορισμός χρόνου ζωής cache
  cacheLife('hours'); // Προκαθορισμένο profile: 1 ώρα

  const response = await fetch(`https://api.example.com/products/${id}`);
  return response.json();
}

export async function getReviews(productId: string) {
  "use cache";

  cacheTag(`reviews-${productId}`, 'all-reviews');
  cacheLife('minutes'); // Προκαθορισμένο profile: λίγα λεπτά

  const response = await fetch(
    `https://api.example.com/products/${productId}/reviews`
  );
  return response.json();
}

Revalidation με revalidateTag

Για να ανανεώσουμε το cache, χρησιμοποιούμε τη συνάρτηση revalidateTag — συνήθως μέσα σε Server Action:

// app/actions.ts
'use server';

import { revalidateTag } from 'next/cache';

export async function submitReview(productId: string, formData: FormData) {
  // Αποθήκευση της αξιολόγησης στη βάση
  await saveReview({
    productId,
    author: formData.get('author') as string,
    content: formData.get('content') as string,
    rating: Number(formData.get('rating')),
  });

  // Ανανέωση του cache για τις αξιολογήσεις αυτού του προϊόντος
  revalidateTag(`reviews-${productId}`);

  // Ανανέωση και του γενικού tag αν χρειάζεται
  revalidateTag('all-reviews');
}

export async function updateProduct(productId: string, data: ProductData) {
  await updateProductInDB(productId, data);

  // Ανανέωση του cache μόνο για αυτό το προϊόν
  revalidateTag(`product-${productId}`);

  // Ανανέωση και της λίστας δημοφιλών αν χρειάζεται
  revalidateTag('popular-products');
}

Custom Cache Profiles

Πέρα από τα προκαθορισμένα profiles ('default', 'seconds', 'minutes', 'hours', 'days', 'weeks', 'max'), μπορούμε να ορίσουμε δικά μας στο next.config.ts:

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
    cacheLife: {
      // Προσαρμοσμένο profile για δεδομένα προϊόντων
      'product-data': {
        stale: 300,      // 5 λεπτά: σερβίρεται stale ενώ γίνεται revalidation
        revalidate: 3600, // 1 ώρα: χρόνος revalidation στο background
        expire: 86400,    // 1 μέρα: μέγιστος χρόνος στο cache
      },
      // Γρήγορο refresh για αξιολογήσεις
      'reviews': {
        stale: 60,
        revalidate: 300,
        expire: 3600,
      },
    },
  },
};

export default nextConfig;

Και μετά τα χρησιμοποιούμε ως εξής:

// lib/data.ts
import { cacheLife, cacheTag } from 'next/cache';

export async function getProduct(id: string) {
  "use cache";
  cacheTag(`product-${id}`);
  cacheLife('product-data'); // Χρήση του custom profile

  const res = await fetch(`https://api.example.com/products/${id}`);
  return res.json();
}

Πρακτικό Παράδειγμα: E-commerce Product Page

Αρκετά με τη θεωρία — ας δημιουργήσουμε ένα ολοκληρωμένο παράδειγμα. Μια σελίδα προϊόντος e-commerce που συνδυάζει στατικό shell, streaming δυναμικό περιεχόμενο και PPR. Αυτό είναι κάτι πολύ κοντά σε ό,τι θα χρησιμοποιήσετε σε πραγματικό project.

Δομή Αρχείων

app/
├── layout.tsx                    # Στατικό layout (header, footer)
├── products/
│   └── [id]/
│       ├── page.tsx              # Κύρια σελίδα προϊόντος με PPR
│       └── loading.tsx           # Fallback για ολόκληρη τη σελίδα
├── components/
│   ├── Header.tsx                # Στατικό — μέρος του PPR shell
│   ├── ProductInfo.tsx           # Δυναμικό — streaming
│   ├── ProductReviews.tsx        # Δυναμικό — streaming
│   ├── RelatedProducts.tsx       # Cached + streaming
│   ├── AddToCartButton.tsx       # Client Component
│   └── skeletons/
│       ├── ProductInfoSkeleton.tsx
│       ├── ReviewsSkeleton.tsx
│       └── RelatedSkeleton.tsx
└── lib/
    ├── api.ts                    # Data fetching functions
    └── types.ts                  # TypeScript types

Κύρια Σελίδα Προϊόντος

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import ProductInfo from '@/components/ProductInfo';
import ProductReviews from '@/components/ProductReviews';
import RelatedProducts from '@/components/RelatedProducts';
import AddToCartButton from '@/components/AddToCartButton';
import ProductInfoSkeleton from '@/components/skeletons/ProductInfoSkeleton';
import ReviewsSkeleton from '@/components/skeletons/ReviewsSkeleton';
import RelatedSkeleton from '@/components/skeletons/RelatedSkeleton';

// Ενεργοποίηση PPR για αυτό το route
export const experimental_ppr = true;

// Δημιουργία static params για τα πιο δημοφιλή προϊόντα
export async function generateStaticParams() {
  const topProducts = await getTopProductIds();
  return topProducts.map((id) => ({ id }));
}

// Δυναμικά metadata βασισμένα στο προϊόν
export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProductBasicInfo(id);

  if (!product) return { title: 'Προϊόν δεν βρέθηκε' };

  return {
    title: `${product.name} | E-Shop`,
    description: product.shortDescription,
    openGraph: {
      images: [product.imageUrl],
    },
  };
}

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      {/* === ΣΤΑΤΙΚΟ ΤΜΗΜΑ (PPR Shell) === */}
      <nav className="text-sm text-gray-500 mb-6">
        <span>Αρχική</span> / <span>Προϊόντα</span> / <span>...</span>
      </nav>

      {/* === ΔΥΝΑΜΙΚΟ ΤΜΗΜΑ: Πληροφορίες Προϊόντος === */}
      <Suspense fallback={<ProductInfoSkeleton />}>
        <ProductInfo productId={id} />
      </Suspense>

      {/* === ΔΥΝΑΜΙΚΟ ΤΜΗΜΑ: Αξιολογήσεις === */}
      <section className="mt-12">
        <Suspense fallback={<ReviewsSkeleton />}>
          <ProductReviews productId={id} />
        </Suspense>
      </section>

      {/* === CACHED ΔΥΝΑΜΙΚΟ ΤΜΗΜΑ: Σχετικά Προϊόντα === */}
      <section className="mt-12">
        <Suspense fallback={<RelatedSkeleton />}>
          <RelatedProducts productId={id} />
        </Suspense>
      </section>
    </div>
  );
}

Component Πληροφοριών Προϊόντος

// components/ProductInfo.tsx
import { getProduct } from '@/lib/api';
import { notFound } from 'next/navigation';
import Image from 'next/image';
import AddToCartButton from './AddToCartButton';

export default async function ProductInfo({
  productId,
}: {
  productId: string;
}) {
  const product = await getProduct(productId);

  if (!product) notFound();

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
      {/* Εικόνα προϊόντος */}
      <div className="relative aspect-square rounded-lg overflow-hidden">
        <Image
          src={product.imageUrl}
          alt={product.name}
          fill
          className="object-cover"
          priority
        />
        {product.discount > 0 && (
          <span className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
            -{product.discount}%
          </span>
        )}
      </div>

      {/* Στοιχεία προϊόντος */}
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">{product.name}</h1>

        <div className="flex items-center gap-2">
          <span className="text-2xl font-bold text-green-600">
            {product.price.toFixed(2)}€
          </span>
          {product.originalPrice && (
            <span className="text-lg text-gray-400 line-through">
              {product.originalPrice.toFixed(2)}€
            </span>
          )}
        </div>

        <p className="text-gray-600 leading-relaxed">
          {product.description}
        </p>

        <div className="flex items-center gap-2">
          <span
            className={`inline-block w-3 h-3 rounded-full ${
              product.inStock ? 'bg-green-500' : 'bg-red-500'
            }`}
          />
          <span>
            {product.inStock ? 'Διαθέσιμο' : 'Μη διαθέσιμο'}
          </span>
        </div>

        {/* Client Component για διαδραστικότητα */}
        <AddToCartButton
          productId={product.id}
          disabled={!product.inStock}
        />
      </div>
    </div>
  );
}

Client Component: Κουμπί Προσθήκης στο Καλάθι

// components/AddToCartButton.tsx
'use client';

import { useState, useTransition } from 'react';
import { addToCart } from '@/app/actions';

export default function AddToCartButton({
  productId,
  disabled,
}: {
  productId: string;
  disabled: boolean;
}) {
  const [quantity, setQuantity] = useState(1);
  const [isPending, startTransition] = useTransition();
  const [added, setAdded] = useState(false);

  const handleAddToCart = () => {
    startTransition(async () => {
      await addToCart(productId, quantity);
      setAdded(true);
      setTimeout(() => setAdded(false), 2000);
    });
  };

  return (
    <div className="flex items-center gap-4 mt-6">
      <div className="flex items-center border rounded-lg">
        <button
          onClick={() => setQuantity(Math.max(1, quantity - 1))}
          className="px-3 py-2 hover:bg-gray-100"
          disabled={disabled}
        >
          −
        </button>
        <span className="px-4 py-2 min-w-[3rem] text-center">
          {quantity}
        </span>
        <button
          onClick={() => setQuantity(quantity + 1)}
          className="px-3 py-2 hover:bg-gray-100"
          disabled={disabled}
        >
          +
        </button>
      </div>

      <button
        onClick={handleAddToCart}
        disabled={disabled || isPending}
        className={`flex-1 py-3 px-6 rounded-lg font-semibold text-white transition-colors ${
          added
            ? 'bg-green-500'
            : disabled
            ? 'bg-gray-300 cursor-not-allowed'
            : 'bg-blue-600 hover:bg-blue-700'
        }`}
      >
        {isPending
          ? 'Προσθήκη...'
          : added
          ? 'Προστέθηκε! ✓'
          : 'Προσθήκη στο Καλάθι'}
      </button>
    </div>
  );
}

Component Σχετικών Προϊόντων με Caching

// components/RelatedProducts.tsx
// Cached component — τα σχετικά προϊόντα δεν αλλάζουν συχνά
"use cache";

import { cacheTag, cacheLife } from 'next/cache';
import { getRelatedProducts } from '@/lib/api';
import Image from 'next/image';
import Link from 'next/link';

export default async function RelatedProducts({
  productId,
}: {
  productId: string;
}) {
  // Ορισμός cache tags και lifetime
  cacheTag(`related-${productId}`, 'related-products');
  cacheLife('hours');

  const products = await getRelatedProducts(productId);

  if (products.length === 0) return null;

  return (
    <div>
      <h2 className="text-2xl font-bold mb-6">Σχετικά Προϊόντα</h2>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {products.map((product) => (
          <Link
            key={product.id}
            href={`/products/${product.id}`}
            className="group block"
          >
            <div className="relative aspect-square rounded-lg overflow-hidden mb-2">
              <Image
                src={product.imageUrl}
                alt={product.name}
                fill
                className="object-cover group-hover:scale-105 transition-transform"
              />
            </div>
            <h3 className="font-medium text-sm truncate">
              {product.name}
            </h3>
            <p className="text-green-600 font-bold">
              {product.price.toFixed(2)}€
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
}

Data Fetching Functions

// lib/api.ts
import { cacheTag, cacheLife } from 'next/cache';

const API_BASE = process.env.API_URL || 'https://api.example.com';

export async function getProduct(id: string) {
  "use cache";
  cacheTag(`product-${id}`);
  cacheLife('product-data');

  const res = await fetch(`${API_BASE}/products/${id}`);
  if (!res.ok) return null;
  return res.json();
}

export async function getProductBasicInfo(id: string) {
  "use cache";
  cacheTag(`product-basic-${id}`);
  cacheLife('hours');

  const res = await fetch(`${API_BASE}/products/${id}/basic`);
  if (!res.ok) return null;
  return res.json();
}

export async function getReviews(productId: string) {
  "use cache";
  cacheTag(`reviews-${productId}`, 'all-reviews');
  cacheLife('reviews');

  const res = await fetch(`${API_BASE}/products/${productId}/reviews`);
  if (!res.ok) return [];
  return res.json();
}

export async function getRelatedProducts(productId: string) {
  "use cache";
  cacheTag(`related-${productId}`);
  cacheLife('hours');

  const res = await fetch(`${API_BASE}/products/${productId}/related`);
  if (!res.ok) return [];
  return res.json();
}

export async function getTopProductIds(): Promise<string[]> {
  "use cache";
  cacheTag('top-products');
  cacheLife('days');

  const res = await fetch(`${API_BASE}/products/top-ids`);
  if (!res.ok) return [];
  return res.json();
}

export async function getPopularProducts() {
  "use cache";
  cacheTag('popular-products');
  cacheLife('hours');

  const res = await fetch(`${API_BASE}/products/popular`);
  if (!res.ok) return [];
  return res.json();
}

Skeleton Components

// components/skeletons/ProductInfoSkeleton.tsx
// Skeleton loading για τις πληροφορίες προϊόντος

export default function ProductInfoSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 animate-pulse">
      {/* Placeholder εικόνας */}
      <div className="aspect-square bg-gray-200 rounded-lg" />

      {/* Placeholder πληροφοριών */}
      <div className="space-y-4">
        <div className="h-8 bg-gray-200 rounded w-3/4" />
        <div className="h-6 bg-gray-200 rounded w-1/4" />
        <div className="space-y-2">
          <div className="h-4 bg-gray-200 rounded w-full" />
          <div className="h-4 bg-gray-200 rounded w-full" />
          <div className="h-4 bg-gray-200 rounded w-2/3" />
        </div>
        <div className="h-4 bg-gray-200 rounded w-1/3" />
        <div className="h-12 bg-gray-200 rounded w-full mt-6" />
      </div>
    </div>
  );
}

// components/skeletons/ReviewsSkeleton.tsx
// Skeleton loading για τις αξιολογήσεις

export default function ReviewsSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-7 bg-gray-200 rounded w-48 mb-6" />
      <div className="space-y-4">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="border rounded-lg p-4 space-y-3">
            <div className="flex justify-between">
              <div className="h-4 bg-gray-200 rounded w-24" />
              <div className="h-4 bg-gray-200 rounded w-20" />
            </div>
            <div className="h-4 bg-gray-200 rounded w-full" />
            <div className="h-4 bg-gray-200 rounded w-4/5" />
          </div>
        ))}
      </div>
    </div>
  );
}

Βέλτιστες Πρακτικές και Patterns

Η σωστή χρήση Streaming, Suspense και PPR δεν είναι απλά θέμα τεχνικής γνώσης — απαιτεί και στρατηγική σκέψη. Ας δούμε τις σημαντικότερες πρακτικές που έχω δει να κάνουν πραγματική διαφορά.

1. Στρατηγική Τοποθέτηση Suspense Boundaries

Η θέση των Suspense boundaries μπορεί να κάνει ή να χαλάσει την εμπειρία χρήστη. Μερικές αρχές που αξίζει να θυμάστε:

Granularity: Τοποθετήστε Suspense boundaries γύρω από κάθε ανεξάρτητο τμήμα δεδομένων. Αυτό επιτρέπει κάθε τμήμα να κάνει stream ανεξάρτητα.
Ιεραρχία: Χρησιμοποιήστε nested Suspense boundaries — ένα εξωτερικό για ολόκληρη τη σελίδα (μέσω loading.tsx) και εσωτερικά για μεμονωμένα sections.
Ομαδοποίηση: Αν δύο components φορτώνουν πάντα μαζί, βάλτε τα στο ίδιο Suspense boundary αντί να δημιουργήσετε δύο ξεχωριστά skeletons.
Αποφυγή υπερβολών: Πάρα πολλά loading skeletons δημιουργούν μια δυσάρεστη εμπειρία "popcorn loading" — ό,τι αναβοσβήνει παντού. Βρείτε τη σωστή ισορροπία.

2. Error Boundaries με Streaming

Τα σφάλματα σε streaming components πρέπει να χειρίζονται σωστά. Το Next.js παρέχει το error.tsx, αλλά μπορούμε να χρησιμοποιήσουμε και custom error boundaries:

// components/ErrorBoundary.tsx
'use client';

import { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback: ReactNode;
}

interface State {
  hasError: boolean;
}

export class StreamingErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// Χρήση στη σελίδα:
// <StreamingErrorBoundary
//   fallback={<p>Σφάλμα φόρτωσης αξιολογήσεων</p>}
// >
//   <Suspense fallback={<ReviewsSkeleton />}>
//     <ProductReviews productId={id} />
//   </Suspense>
// </StreamingErrorBoundary>

3. Skeleton Loading Patterns

Τα loading skeletons πρέπει να μοιάζουν με το πραγματικό περιεχόμενο. Αυτό ακούγεται προφανές, αλλά θα εκπλαγείτε πόσες φορές αγνοείται:

Αντιστοίχιση μεγέθους: Το skeleton πρέπει να έχει παρόμοιες διαστάσεις με το τελικό περιεχόμενο, ώστε να αποφευχθεί layout shift (CLS).
Animation: Χρησιμοποιήστε animate-pulse ή shimmer effect για να δείξετε ότι κάτι φορτώνει.
Δομική ακρίβεια: Αν το περιεχόμενο είναι grid με κάρτες, το skeleton πρέπει να δείχνει grid με placeholder κάρτες — όχι κάτι εντελώς διαφορετικό.

4. Performance Monitoring

Δεν αρκεί να υλοποιήσετε streaming — πρέπει να μετρήσετε και τα αποτελέσματα. Οι μετρικές που πρέπει να παρακολουθείτε:

TTFB (Time to First Byte): Πρέπει να είναι πολύ χαμηλό με PPR, αφού σερβίρεται στατικό HTML.
FCP (First Contentful Paint): Θα πρέπει να είναι γρήγορο — ο χρήστης βλέπει αμέσως τη δομή.
LCP (Largest Contentful Paint): Εξαρτάται από το πότε γίνεται stream το κύριο περιεχόμενο.
CLS (Cumulative Layout Shift): Πρέπει να είναι κοντά στο 0 αν τα skeletons είναι σωστά σχεδιασμένα.

Μπορείτε να χρησιμοποιήσετε εργαλεία όπως το Vercel Speed Insights ή τα next/web-vitals για real-time monitoring.

5. Αποφυγή Κοινών Λαθών

Μετά από αρκετή εμπειρία με αυτές τις τεχνολογίες, υπάρχουν κάποια λάθη που βλέπω συχνά:

Μη τοποθετείτε Suspense μέσα σε Client Components για Server Components — η Suspense boundary πρέπει να βρίσκεται σε Server Component.
Μη χρησιμοποιείτε dynamic = 'force-dynamic' σε ολόκληρη τη σελίδα αν μόνο ένα τμήμα χρειάζεται δυναμικά δεδομένα — χρησιμοποιήστε PPR αντί αυτού.
Μη ξεχνάτε τα key props στα Suspense boundaries όταν αλλάζουν βάσει params — αλλιώς το React δεν θα κάνει re-render.
Προσοχή στο prop drilling: Αν ένα Suspense boundary χρειάζεται πολλά props, ίσως πρέπει να ανεβάσετε το data fetching ψηλότερα στο component tree.

Σύγκριση Στρατηγικών Rendering

Ας δούμε μια αναλυτική σύγκριση όλων των διαθέσιμων στρατηγικών rendering στο Next.js. Αυτός ο πίνακας θα σας βοηθήσει να διαλέξετε τη σωστή προσέγγιση ανάλογα με τις ανάγκες σας:

Στρατηγική	Πότε δημιουργείται το HTML	TTFB	Δυναμικά δεδομένα	Ιδανική χρήση
SSG (Static Site Generation)	Build time	Πολύ γρήγορο (CDN)	Όχι (μόνο κατά το build)	Blog posts, marketing σελίδες, documentation
ISR (Incremental Static Regeneration)	Build time + revalidation	Πολύ γρήγορο (CDN)	Μερικώς (revalidation σε intervals)	Κατάλογοι προϊόντων, ειδήσεις, CMS
SSR (Server-Side Rendering)	Request time	Αργό (αναμονή για δεδομένα)	Ναι (πλήρως δυναμικό)	Dashboards, εξατομικευμένο περιεχόμενο
Streaming SSR	Request time (σταδιακά)	Γρήγορο (shell αμέσως)	Ναι (σταδιακά)	Σύνθετες σελίδες με πολλές πηγές δεδομένων
PPR (Partial Prerendering)	Build time (shell) + Request time (δυναμικά)	Πολύ γρήγορο (CDN για shell)	Ναι (στα δυναμικά τμήματα)	E-commerce, μείγμα στατικού/δυναμικού

Πότε να Χρησιμοποιήσετε Κάθε Στρατηγική

Σενάριο	Προτεινόμενη Στρατηγική	Αιτιολόγηση
Στατική σελίδα marketing	SSG	Δεν αλλάζει ποτέ, μέγιστη ταχύτητα
Blog με νέα άρθρα	SSG + ISR	Στατικό με ανανέωση κατά τη δημοσίευση
Σελίδα προϊόντος e-commerce	PPR	Στατικό layout, δυναμική τιμή/διαθεσιμότητα
Dashboard με real-time δεδομένα	Streaming SSR	Πολλές πηγές δεδομένων, streaming για UX
Σελίδα αναζήτησης	Streaming SSR	Πλήρως δυναμικό βάσει query, streaming results
Σελίδα χρήστη/προφίλ	PPR	Στατικό layout, δυναμικά στοιχεία χρήστη

Σύγκριση Απόδοσης (Performance Benchmarks)

Για μια τυπική σελίδα e-commerce με 3 data sources (προϊόν: 200ms, αξιολογήσεις: 500ms, προτάσεις: 300ms), οι διαφορές είναι εντυπωσιακές:

Μετρική	SSR	Streaming	PPR
TTFB	~500ms	~50ms	~10ms (CDN)
FCP	~600ms	~100ms	~50ms
LCP	~700ms	~300ms	~250ms
Πλήρης σελίδα	~700ms	~550ms	~550ms

Παρατηρήστε κάτι ενδιαφέρον: ενώ ο συνολικός χρόνος είναι παρόμοιος μεταξύ Streaming και PPR, η αντιληπτή ταχύτητα (perceived performance) είναι δραματικά καλύτερη με PPR. Ο χρήστης βλέπει αμέσως ένα ολοκληρωμένο shell — κι αυτό κάνει τη διαφορά.

Προχωρημένα Patterns

Conditional Streaming με Dynamic Segments

Μερικές φορές θέλουμε μέρος του περιεχομένου να είναι δυναμικό μόνο υπό συγκεκριμένες συνθήκες. Για παράδειγμα, αν ο χρήστης είναι συνδεδεμένος, δείχνουμε εξατομικευμένες προτάσεις — αν όχι, γενικές.

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { cookies } from 'next/headers';
import ProductInfo from '@/components/ProductInfo';
import PersonalizedRecommendations from '@/components/PersonalizedRecommendations';
import GenericRecommendations from '@/components/GenericRecommendations';

export const experimental_ppr = true;

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  // Ελέγχουμε αν ο χρήστης είναι συνδεδεμένος
  const cookieStore = await cookies();
  const isLoggedIn = cookieStore.has('session');

  return (
    <div>
      <Suspense fallback={<ProductInfoSkeleton />}>
        <ProductInfo productId={id} />
      </Suspense>

      {/* Δυναμικές εξατομικευμένες προτάσεις μόνο για συνδεδεμένους */}
      {isLoggedIn ? (
        <Suspense fallback={<RecommendationsSkeleton />}>
          <PersonalizedRecommendations productId={id} />
        </Suspense>
      ) : (
        <Suspense fallback={<RecommendationsSkeleton />}>
          <GenericRecommendations productId={id} />
        </Suspense>
      )}
    </div>
  );
}

Streaming με Pagination

Ένα pattern που χρησιμοποιώ πολύ συχνά σε production: ο συνδυασμός streaming με pagination μέσω searchParams.

// app/products/page.tsx
import { Suspense } from 'react';
import ProductGrid from '@/components/ProductGrid';
import Pagination from '@/components/Pagination';
import FilterSidebar from '@/components/FilterSidebar';
import ProductGridSkeleton from '@/components/skeletons/ProductGridSkeleton';

export const experimental_ppr = true;

interface SearchParams {
  page?: string;
  category?: string;
  sort?: string;
}

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const { page = '1', category, sort } = await searchParams;

  return (
    <div className="flex gap-8">
      {/* Στατικό sidebar — μέρος του PPR shell */}
      <FilterSidebar />

      <main className="flex-1">
        <h1 className="text-3xl font-bold mb-6">Προϊόντα</h1>

        {/* Δυναμικό grid — κάνει stream βάσει searchParams */}
        {/* Χρήση key για re-mount όταν αλλάζουν τα params */}
        <Suspense
          key={`${page}-${category}-${sort}`}
          fallback={<ProductGridSkeleton />}
        >
          <ProductGrid
            page={Number(page)}
            category={category}
            sort={sort}
          />
        </Suspense>
      </main>
    </div>
  );
}

Προσέξτε τη χρήση του key prop στο Suspense. Αυτό είναι κρίσιμο: εξασφαλίζει ότι όταν αλλάζουν τα searchParams, το component κάνει unmount/remount, εμφανίζοντας ξανά το fallback skeleton ενώ φορτώνουν τα νέα δεδομένα. Χωρίς αυτό, ο χρήστης θα βλέπει τα παλιά αποτελέσματα μέχρι να φορτώσουν τα καινούργια.

Συμπέρασμα

Οι σύγχρονες στρατηγικές rendering στο Next.js αλλάζουν θεμελιωδώς τον τρόπο που χτίζουμε web εφαρμογές. Αντί να αναγκαζόμαστε να επιλέξουμε μεταξύ γρήγορου αρχικού φορτώματος (SSG) και φρέσκων δεδομένων (SSR), τεχνολογίες όπως το Streaming, το Suspense και το Partial Prerendering μας δίνουν τη δυνατότητα να έχουμε και τα δύο.

Ας ανακεφαλαιώσουμε τα βασικά:

Streaming εξαλείφει την αναμονή — ο χρήστης βλέπει αμέσως τη δομή, και το περιεχόμενο εμφανίζεται σταδιακά.
Suspense παρέχει τον μηχανισμό ελέγχου — ορίζει πού εμφανίζονται loading states και πώς ομαδοποιείται το δυναμικό περιεχόμενο.
PPR συνδυάζει στατικό και δυναμικό rendering — instant TTFB από CDN με δυναμικό streaming.
"use cache" στο Next.js 16 δίνει ρητό, προβλέψιμο caching — πλήρης έλεγχος χωρίς εκπλήξεις.

Το καλύτερο; Δεν χρειάζεται ριζική αναδιάρθρωση για να ξεκινήσετε. Προσθέστε Suspense boundaries στα πιο αργά τμήματα μιας σελίδας, ενεργοποιήστε PPR σε ένα route, και δείτε τα αποτελέσματα. Κάθε βήμα φέρνει μετρήσιμη βελτίωση.

Καθώς το Next.js εξελίσσεται, αυτές οι στρατηγικές γίνονται ακόμη πιο σταθερές. Το PPR κινείται από πειραματική σε stable λειτουργία, και η οδηγία "use cache" απλοποιεί σημαντικά τη διαχείριση cache. Η κατανόηση αυτών των τεχνολογιών σήμερα σας δίνει σοβαρό προβάδισμα.

Ξεκινήστε μικρά, μετρήστε τα αποτελέσματα, και σταδιακά υιοθετήστε τις στρατηγικές που ταιριάζουν στις ανάγκες σας. Η βελτίωση θα είναι άμεσα ορατή — τόσο στους αριθμούς όσο και στην εμπειρία των χρηστών σας.