Εκμάθηση Next.js 16 Partial Prerendering (PPR)

Εκμάθηση Next.js 16 Partial Prerendering (PPR)

Στο παραδοσιακό rendering του web, οι προγραμματιστές έπρεπε να επιλέξουν ανάμεσα σε δύο άκρα:

1. Πλήρως Στατικό (SSG): Αστραπιαίος χρόνος πρώτου byte (TTFB), αλλά αδυναμία εξατομίκευσης περιεχομένου χωρίς client-side fetching.
2. Πλήρως Δυναμικό (SSR): Εξατομικευμένο και σε πραγματικό χρόνο, αλλά μπλοκάρει το TTFB μέχρι να ολοκληρωθεί και το πιο αργό ερώτημα στη βάση δεδομένων.

Το Partial Prerendering (PPR) ενοποιεί και τα δύο. Σερβίρει άμεσα ένα στατικό HTML κέλυφος από το edge CDN, ενώ διοχετεύει (stream) τα δυναμικά δεδομένα μέσα στα όρια Suspense στην ίδια ροή απόκρισης.

Ενεργοποίηση με Cache Components στο Next.js 16

Στο Next.js 16 το experimental_ppr καταργήθηκε. Ενεργοποιήστε το cacheComponents: true στο next.config.ts:

typescript
Αντιγραφή
// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

typescript
Αντιγραφή
// src/app/dashboard/page.tsx
import { Suspense } from 'react'
import { StaticHeader } from '@/components/static-header'
import { DynamicUserMetrics } from '@/components/dynamic-user-metrics'
import { SkeletonMetrics } from '@/components/skeletons'

export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* 1. Prerendered Static Shell */}
      <StaticHeader />

      {/* 2. Dynamic Streaming Hole */}
      <Suspense fallback={<SkeletonMetrics />}>
        <DynamicUserMetrics />
      </Suspense>
    </div>
  )
}

Πώς το Παραδίδει το Edge

1. Όταν ο client ζητά το /dashboard, το edge στέλνει αμέσως το προ-μεταγλωττισμένο στατικό HTML και CSS.
2. Ο browser αποδίδει το κέλυφος αμέσως (0ms καθυστέρηση TTFB).
3. Ο server εκτελεί ταυτόχρονα τα δυναμικά ερωτήματα στη βάση δεδομένων για το DynamicUserMetrics.
4. Μόλις επιλυθεί το promise, το κομμάτι HTML μεταδίδεται μέσω streaming στην ανοιχτή σύνδεση HTTP και το React αντικαθιστά το fallback με το ζωντανό UI.

Λίστα Ελέγχου

• Περικλείστε κάθε ασύγχρονο Server Component σε <Suspense fallback={...}>.
• Βεβαιωθείτε ότι οι αναγνώσεις cookies/headers περιορίζονται αυστηρά εντός του ορίου Suspense.
• Απολαύστε βαθμολογίες Core Web Vitals 95+ χωρίς κόπο.