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.
(Image source: https://nextjs.org/learn/basics/data-fetching/pre-rendering)
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.
(Image source: https://nextjs.org/learn/basics/data-fetching/pre-rendering)
(Image source: https://nextjs.org/learn/basics/data-fetching/two-forms)
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.
(Image source: https://nextjs.org/learn/basics/data-fetching/two-forms)
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.
Top comments (0)