What is hybrid rendering in Next.js?

Next.jsMiddle~1 min read

Hybrid rendering in Next.js is an approach where the same page combines several rendering strategies: server components, client components, static generation, and dynamic rendering.

In other words: Next.js lets you flexibly choose where and how to render each part of the app, instead of using one method for everything.

Short definition (for an interview)

Hybrid rendering is Next.js's ability to:

render part of the page on the server
part - in the browser
part - ahead of time (static)
part - on request (dynamic)

all of this within a single page.

What this looks like conceptually

https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/learn/pages-router/data-fetching/server-side-rendering.png

https://nextjs.org/_next/image?q=75&url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Flearn%2Flight%2Flearn-client-server-modules.png&w=3840

https://miro.medium.com/v2/resize%3Afit%3A1400/1%2AcKzjyFZerA-VKa8IueCYHA.png

A single page can consist of:

a server layout
a server component with data
a client component for interactivity

A simple hybrid page example

tsx

// Server Component (page.tsx)
import Counter from './Counter'

export default async function Page() {
  const products = await getProducts()

  return (
    <>
      <h1>Products</h1>
      <ProductList products={products} />
      <Counter />
    </>
  )
}

tsx

// Client Component
'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}