Suggest an editImprove this articleRefine the answer for “What is hybrid rendering in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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. **Key point:** Next.js does not force you to pick just one - SSR, SPA, or SSG can be combined within a single page, wherever it makes sense.Shown above the full answer for quick recall.Answer (EN)Image**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    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> } ``` - data and the list - **server** - the counter - **client** - the user gets ready HTML + minimal JS --- ## What approaches make up hybrid rendering ### 1. Server and client components - Server Components - data and structure - Client Components - interactivity --- ### 2. Static generation (SSG) The page is generated **at build time**. Suited for: - blogs - landing pages - documentation ```ts export const revalidate = 60 ``` --- ### 3. Dynamic rendering (SSR) HTML is created **on every request**. Suited for: - personalized pages - authenticated users --- ### 4. Incremental regeneration (ISR) A combination of SSG + SSR: - HTML is cached - periodically updated --- ## Why it's called "hybrid" Because Next.js **does not force you to pick just one**: - not "all SSR" - not "all SPA" - not "all SSG" You can combine everything at once - **wherever it makes sense**. --- ## Why hybrid rendering is needed ### Performance - less JS - fast first render ### SEO - HTML is available immediately ### UX - interactivity where it's needed ### Scalability - easier to optimize large applicationsFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.