Next.js Rendering Strategies | SSR , CSR , SSG

 

First learn there full form

SSR - Server Side Rendering

CSR -  Client Side Rendering (browser+server)

SSG - Static site Generation

#Before Interview Just:

Next.js Rendering

• SSR → Dynamic

• CSR → Dynamic

• SSG → Static

SSR

• Page is made on the server.

• Server sends HTML with the data already rendered.

CSR

• Page is made in the browser.

• Browser fetches data from the server after the page loads.

• CSR does not mean only data; the browser also builds the UI.

SSG

• Page is made before the user visits.

• HTML is generated beforehand.

Simple Difference

• SSR → Server fetches data + renders page → sends HTML.

• CSR → Server sends HTML/JS → browser fetches data + renders/updates page.

• SSG → Page is generated beforehand → pre-generated HTML is served.