CSR, SSR and SSG (Pt. 01) — Introduction
The history of Static Site Generation may run till the beginning of Web. In Static Site Generation, all the compiling and rendering of a website occurs in the build time. Then there will be a bunch of static files, including HTML, CSS and JavaScript.
When we look into website rendering techniques, there are three ways named,
- Client Side Rendering
- Server Side Rendering
- Static Site Generation
In this article, I will walk you though these three techniques briefly. In later articles, we’ll discuss examples based on NextJS. NextJS is a React framework, that has been introduced to increase the efficiency of the developers. The beauty of NextJS is, it supports all the three rendering techniques that we are going to discuss.
Client Side Rendering (CSR)
In simple terms, CSR is rendering/processing the website totally in the client browser. Data retrieving, route handling and all the logic is handled by the client browser.
Above image illustrates how Client Side Rendering takes place step by step. There are three components involved in the process. Browser is were the user interacts. Website files are hosted in Web Server. And the Backend Server (Optional) handles the data retrieval.
- Initial call is made by client browser to retrieve the website from the web server.
- Web Server returns a bunch of files including HTML, CSS and JS files. Browser renders the HTML files and executes JS code accordingly.
- JS code contains the logic to make API calls and retrieve required data from backend. Browser make API calls to the Backend Server to retrieve data.
- Backend process and returns the requested data to the browser.
- Browser continue executing JS code and renders the pages according to the retrieved data.
Server Side Rendering (SSR)
In SSR, majority of the logic is handles in the Web Server. Web Server is responsible for executing the logic, making API calls and rendering the whole page. Generated HTML is returned to the client browser ready to be displayed.
Let’s go through the steps shown in the above illustration.
- Client Browser requests the web page from the Web Server.
- Web Server executes the logic required to render the requested web page. If there are API calls to be made, the Web Server makes those API calls to the Backend Server.
- Backend Server processes and returns the requested data to the Web Server.
- Web Server renders the web page according to the retrieved data. Finally the Client Browser receives a whole HTML page ready to be displayed.
Static Site Generation (SSG)
As I have mentioned previously, the Static Site Generation happens in the build time. A HTML file is generated for each page during the build time. These generated HTML file is stored in the Web Server. Each of these stored file has a dedicated URL to access.
Above illustration shows the process of Static Site Generation. All the logic execution and data retrieval happens during the build time.
- Client Bowser requests a page from the Web Server.
- Since all the pages are generated at the build time, the Web Server returns the relevant HTML file immediately.
Since the pages are generated during the build time, data displayed is a snapshot of the build time. Even though the databases are updated, data displayed in static generated page is not updated with the time. The term revalidation comes in to play to avoid this. A mechanism can be integrated to revalidate the static generated pages time to time or on demand. In revalidation phase, the web Server re-renders the page by making API calls.
Wrapping Up
In this article, we discussed three rendering techniques named Client Side Rendering, Server Side Rendering and Static Site Generation. There is nothing called best rendering technique. Each of these techniques has it’s own use-cases based on their pros and cons. It is a topic for another article.
Here’s the continuation of this article, where we will discuss pros and cons.
Hope you enjoyed the article! Feel free to leave a comment if you have any questions or feedback. Peace ✌️
