Adefisayo's Blog

Understanding Static Site Generation, Server-side and Client-side Rendering without Jargon.

Understanding Static Site Generation, Server-side and Client-side Rendering without Jargon.

Adefisayo Adeniji's photo
Adefisayo Adeniji
·

2 min read

I am writing this article based on what I think would have helped me understand SSG, SSR and CSR better while I was trying to learn them.

There are 3 other terms you need to understand for you to grasp the concepts of SSG, SSR and CSR. These terms are:

  1. Rendering: This is the process of converting your JSX code into an equivalent HTML representation. Rendering can take place on the client (the user's computer) or the server(the computer that runs your code on the backend). Please note that when rendering happens on the server, it is called Pre-rendering.

  2. Build time: This is the period of preparing your application code for production. In plain words, it's the process that takes place when you run npm run build to build a React.js or Next.js app for production.

  3. Request time or Runtime: This is the period when your application code runs on the server in response to the request of a user. For instance, when a user sends a request to visit your website or clicks on a submit button.

Now let's delve into the three elephants.

  1. Client Side Rendering: When a user sent a request for your web app, the HTML shell similar to the code below with all the necessary javascript codes to render your web pages and make them interactive will be sent from the server(the computer that runs your code on the backend) to the client (the user's computer). These javascript codes will then render the needed page right there on the client (the user's computer). Therefore, client-side rendering is the process of rendering your app on the client (the user's computer).
<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- some header tags here -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
      </body>
</html>

  1. Server-Side Rendering: This occurs when your app renders on the server(the computer that runs your code on the backend) at request time or runtime, the rendered app will then be sent to the client(the user's computer). This simply means that the HTML file will be populated with the required HTML and sent to the client(the user's computer) alongside the necessary javascript code to make the page interactive.

  2. Static Site Generation: This is similar to SSR in the sense that the rendered app will be served from the server(the computer that runs your code on the backend), however, SSG is only generated once during build time.

I have made these explanations to be as short as possible, you can read them further here

Next.jsReactHTML5JavaScript