Introduction

As I was learning Server Side Rendering, I noticed that I didn’t pay attention to the detail or how we manage to render in different way and how it has changed in the past.

Ill go over the different type of rendering technology.

terminology

Client : I refer to the user’s browner on their device. It could be PC or smartphone.

Server : Organization or individual own or rent and run server. It includes cloud services.

Let’s start with Multi Page Application

Multi Page Application

  1. Client send requests to server. Ex. GET hello.com
  2. Server response to that request Ex. fetching from database, user authentication, and generating HTML and such.
  3. Server sends the file like hello/index.html. In case of static web site, that’s only returned, but if it is dynamic web site, it handles different ways

When I think of traditional way of rending, I came up with this method.

Single Page Application(SSR) or Client Side Rendering

  1. Client send requests to server. Ex. GET hello.com

  2. Multiple case.

    a. Immediate return(SSG(static site generation), html file already made in build )

    b. Immediately return CACHED page if cached page is still valid(ISR)

    c.Full on SSR(new page generated on every request)

  3. Client requests js file to CDN ex. GET hello.com/main.js

  4. Sever returns js file.

  5. In case of dynamic web application, it might be missing data. It need another call to API to get data. ex. GET hello.com/api/data

  6. Sever returns data in JSON or specified format. ex {name : john}

Cons Between client requesting to CDN and server returning js file(step 1- 4), the browser will be blank page. Then, calling api and server sending JSON, it will likely loading spinner state. Then, finally content will be shown. Since Client might need to send a few or more request to get data from api, it will takes lots of time until whole page is shown.

Server Side Rendering(SSR)

  1. Client sends request to server. (ex. GET hello.com)

  2. Multiple case.

    a. Server can return HTML file already build in production. SSG(static site generation).

    b. Server can immediately return CACHED page if cached page is still valid(ISR).

    c.Full on SSR(new page generated on every request)

  3. Server return HTML file.(hello.com/index.html). This has actually content.

  4. Client call js file. (GET hello.com/main.js)

  5. CDN returns js file (main.js).BE AWARE that, between step 4-5, even though the webpage is loaded, the button and form which require JS file will not work since JS file is not loaded yet. Loaded but no hydrated. Depending on your device capacity, internet speed, it might take a while. NOTE that this is only first load. After it, since it is cached, it will be faster.

  6. At this points, you will have compte page.

details

At stage 3, The server renders the React components and converts the output to a serialized HTML string then it sends this HTML string to the client. After the client receives the HTML and displays it. Then, React component hydrates the HTML.

Serialization means that converting the rendered HTML into a string format.