Takuya Kikuchi
TK's Blog ✍️

TK's Blog ✍️

The difference between CSR, SSR and SSG

Takuya Kikuchi's photo
Takuya Kikuchi
·Jul 2, 2022·

2 min read

Play this article

Click here for the Japanese article

Difference between CSR, SSR, and SSG

CSR

Client-side rendering.
A method of executing JavaScript on the browser to generate the DOM and display the content after it is mounted.
Initial loading of the page does not display any content, it will be displayed after hydration.
React applications created with Create React App are rendered this way.

no-pre-rendering.png (Image source: nextjs.org/learn/basics/data-fetching/pre-r..)

SSR

Server-side rendering.
A method of evaluating and executing components on the server side and delivering the results in HTML and minimal JavaScript.
Each time a request is made to the server, the HTML is processed and generated on the server side.
Nuxt.js, Next.js, etc. are rendered this way.
The content is displayed from the initial load, and then becomes interactive by Hydration. (e.g., <Link /> makes it jumpable)
It is considered better performance and SEO friendly than CSR.

pre-rendering.png (Image source: nextjs.org/learn/basics/data-fetching/pre-r..)

server-side-rendering.png (Image source: nextjs.org/learn/basics/data-fetching/two-f..)

SSG

Server-side generator.
Like SSR, HTML is generated on the server side first.
The difference between SSG and SSR is that HTML is generated at build time, and content is delivered from the CDN each time a request is made.
This is used for static pages such as blogs, help sites, and e-commerce product lists. Better performance than SSR because HTML is generated at build time.

static-generation.png (Image source: nextjs.org/learn/basics/data-fetching/two-f..)

Regarding the difference in use.

"Is it ok to pre-render a page prior to the user's request?"
If yes, use SSG.
If no, use SSR or CSR.
Next.js can set SSG or SSR for each page.

References

 
Share this