In Next.js, one of the important features is pre-rendering. On the way to understand what is pre-rendering, I also have to learn SSR, SSG, and ISR so I will write an article about those.
1. SSR (Server Side Rendering)
To understand SSR, we have to know the difference between CSR and SSR.
In CSR (Client Side Rendering), when a client makes an initial request, the server sends all file elements of a web page. Those are cached by the browser and then javascript runs on the browser to show the interactive page. React uses CSR but sometimes it is not useful because sending it and running takes a long time if the JavaScript file is so big.
In SSR (Server Side Rendering), on the other hand, when a client makes an initial request, the server sends a fully rendered page to the client. It does not need to send it and run so SSR is faster than CSR. In addition, it has good benefits for SEO.
2. SSG (Static Site Generation)
We can understand SSR is greater than CSR. However, even with server-side rendering, overhead is unavoidable since calculations are performed for each request from the client. To resolve that, there is SSG (Static Site Generation). In SSG, Rendering is done at the time of building the web application, and the HTML file for each page is generated at that time. When a client makes a request, it returns that HTML file. Even if the web page has data from external DB, API, and CMS, getting data is done at the build time. Especially, SSG is effective when placing a cache of HTML files on a CDN and returning the cache from a CDN close to each client. This architecture is called Jamstack. Jamstack websites are more secure because hackers can not access the server directly. Moreover, it can handle the crush of demand because it just returns HTML files when a client makes a request.
According to Vercel, SSR and SSG are called pre-rendering.
Two forms of Pre-rendering
Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.-Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
-Server-side Rendering: The HTML is generated on each request.
3. ISR (Incremental Static Regeneration)
SSG does not depend on the client's request because HTML for each page and the attached data were generated in ahead. However, there is a problem we can not get the latest external data if the data change at the data source after the build time. To solve this, Here is ISR (Incremental static regeneration). In ISR, it has a function of regenerating HTML by re-fetching data and re-rendering the page in the background at regular intervals in addition to the behavior of SSG explained so far.
Nowadays, Next.js is popular among Front-End Developers because SSR, SSG, and ISR enable users to provide better UI than React.
Top comments (1)
Thanks for this article.