This content originally appeared on DEV Community and was authored by Takuya Kikuchi
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.
References
- Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js
- Two Forms of Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js
- (Japanese article) SSR、SSG、Client Side Renderingの違いをまとめた - Qiita
This content originally appeared on DEV Community and was authored by Takuya Kikuchi
Takuya Kikuchi | Sciencx (2022-07-03T01:13:32+00:00) The difference between CSR, SSR and SSG. Retrieved from https://www.scien.cx/2022/07/03/the-difference-between-csr-ssr-and-ssg/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.