Photo by Lautaro Andreani on Unsplash
Hi everyone! How was the first day of your long weekend? Today I want to share with you concepts of various web rendering modes: SSG, SSR, CSR, and ISR. They look similar but have different details. Before deciding which one to use, let’s take a look at the introductions below!
Static Site Generation (SSG)
SSG, or static generation, means generating HTML files when building the entire project. These HTML files already contain the data needed to display. This rendering mode is a type of pre-rendering. SSG is very suitable for static websites where content does not change, because all data is obtained at build time. These HTML files can be placed on a CDN and cached to improve website performance. In addition to this, adopting the SSG rendering mode is also beneficial for SEO.
Server-side Rendering (SSR)
SSR, or server-side rendering, means that every time the browser (client-side) sends a request, the server generates the HTML file and sends it back to the browser for display. This rendering mode is very suitable for data that changes frequently. However, because the server takes time to generate the HTML file, the website response time will be longer, and users will see a white screen while waiting. SSR is also considered a type of pre-rendering, so it is quite friendly to SEO~ But it should be noted that this method requires the server to constantly process user interactions.
Client-side Rendering (CSR)
CSR, or client-side rendering, implies pretty much what the name says. The HTML file sent by the server to the browser can be considered content-less. The browser can only render on the screen after fetching data from the server. The rendering mode used by SPA (Single Page Application like React or Vue) is CSR. The biggest advantage of this mode is that there is no need to fetch files from the server again when switching pages, so users will not see a white screen, which is considered a very good user experience. However, the rendering time will depend on the client’s environment, and because of this, the burden on the server is reduced quite a lot.
Incremental Static Regeneration (ISR)
ISR, or incremental static regeneration, is a rendering mode that is less commonly heard of, and is also considered a type of pre-rendering. ISR generates all (or part of) the HTML files when building the project. When there is a new request and a predetermined time has passed, the server will first give the browser the old file while regenerating the latest file in the background, and then send it to the browser for display after generation is complete. If a user goes to a page that has not yet been generated, the server will generate the file on the spot and cache it, so the next user to this page can directly get the file from the cache. ISR is very similar to SSG, but it solves the problem that SSG cannot update data content, and HTML files will also be cached on the CDN, so it also reduces the burden on the server compared to SSR.
Which one should you use?
Each rendering mode has its pros and cons, and which one to choose depends on our project. There is no clear winner.
- Internal system dashboards where data changes constantly and SEO is not needed are very suitable for CSR.
- If the data change rate is not low but SEO is needed, you can consider using SSR.
- If data rarely needs to be updated like event or marketing websites, and SEO is also important, using SSG is very suitable.
- If data does not need to be updated much or there are too many pages and SEO is needed, such as product pages, then ISR is a good choice.
I also drew a table (in English XD), take a look~
Pre-render in Next.js
Next.js has built-in support for the rendering modes mentioned above, and it also defaults to using SSG to render web pages that do not need to fetch data. If you need to get data from the server, it will be mixed with CSR (hybrid). If you want to use other rendering modes, you can use the following functions provided by Next.js:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Fetches required data at build time and puts it into the HTML file |
| getStaticPaths (Static Generation) | Decides which dynamic routes need to be generated as HTML files at build time |
| getServerSideProps (Server-side Rendering) | A function that runs every time the browser sends a request to get the required data |
Conclusion
That’s it for today, let’s continue tomorrow~ Tomorrow I will share with you how to use those three functions to implement websites with different rendering modes! What are your thoughts on the rendering modes learned today?