Concept: Streaming allows you to break down the page's HTML into smaller chunks and progressively send them from the server to the client.

Benefit: Instead of waiting for the entire page's data to be fetched before showing anything (blocking), the user sees the initial UI (layout, navbar) immediately. Slow data-fetching components show a loading state (Suspense fallback) and then "pop in" when ready.

Mechanism: It uses HTTP Transfer-Encoding: chunked.

Wrap an asynchronous component that performs data fetching with a React <Suspense> boundary.

import { Suspense } from 'react'
import PostFeed from './PostFeed'
import Loading from './loading'

export default function Page() {
  return (
    

      
My Feed
      }>
        
      
    
  )
}

Next.js also provides a special file loading.js which automatically wraps the page content in a Suspense boundary.

Concept: PPR combines static rendering and dynamic streaming in the same route. It allows you to have a static shell (navbar, footer, sidebar) that is served instantly from the edge, while dynamic parts (user data, cart) stream in parallel.

How it works: The static parts are pre-generated at build time. The dynamic parts are wrapped in Suspense boundaries. When a request comes in, the static shell is sent immediately, and the dynamic holes are filled as data becomes available.

`generateStaticParams` (App Router): Used in dynamic routes to statically generate routes at build time. It replaces `getStaticPaths`. It returns an array of objects representing the dynamic segments.

`getServerSideProps` (Pages Router): Runs on every request to fetch data. In the App Router, this is replaced by standard `async/await` fetch calls in Server Components with `cache: 'no-store'`.

When navigating between routes in Next.js, the server doesn't send full HTML. Instead, it sends the RSC Payload.

This is a compact binary representation of the rendered React tree. It contains:

• The rendered result of Server Components.
• Placeholders for Client Components and references to their JavaScript files.
• Props passed from Server to Client Components.

The client uses this payload to update the DOM without a full page reload.