Serving Strategies

What are Serving Strategies ?

Serving strategy refers to content creation (HTML) for a web page or web application. But where and when can it happen ?

Where can it happen ?

The creation of pages which the user will see in the browser can either happen in a browser directly (client-side) or in the server side.

When can it happen ?

The creation of pages can happen either during run time or during build time.

Based on when and where rendering happens, there are three types of serving strategies :

CSR (Client-side rendering)
SSR (Server side rendering)
SSG (Static site generation)

1. Client-side rendering : (run time, happens in browser)

It is the rendering of websites or web apps entirely in the browser with Javascript. In a traditional single page application built with React, this is how client-side rendering will happen :

User requests a website say www.mywebapp.com.
Server will respond with a bare-minimal HTML file with javascript links.
Browser downloads the HTML and the linked JS and CSS files.
Then browser executes the underlying framework or library.(React or Angular)
Finally mounts the web page to the browser.
Subsequent renders will happen very fast based on the user route change, browser will fetch content required for the page to be rendered and will generate and load the page.

When to use CSR :

if your application has a lot of dynamic data
if your application has a very complex UI
if your application is focused on a bigger number of users
if your application doesn’t have a lot of content used for SEO

Pros

fast rendering after initial loading
a lot of Javascript frameworks and libraries supporting CSR

Cons

low SEO
initial loading may take some time

Suggested Frameworks

Angular (https://angular.io/), React (https://reactjs.org/) etc...

2. SSR (Server-side rendering) (run time, happens in server)

It is yet another way of rendering, where it renders content in the server and sends ready .html files to the browser.

Flow for server-side rendering :

User requests the website
Server creates ready HTML files with all the content that is required for this specific page or view.
Browser get's this file but it would not be interactive, but still the user can see.
Then browser downloads the linked javascript files required for this page which would help in making this page interactive. This process is called hydration.
During hydration, just javascript or any other libraries or framework will get into picture and make the page interactive from there on.

When to use SSR ?

if your application UI is complex but with a small amount of interactivity
if your application is a more static page
if the amount of users is not large

Pros

search engines bots can crawl for a better SEO
initial loading is faster

Cons

lots of server requests, have to scale the server for the FE as well

Suggested Frameworks

Next Js (https://nextjs.org/), Svelte (https://svelte.dev/)

3. SSG (Static site generation) (build time, not on both the browser and the server)

SSG is the process of building static HTML pages during build time. Whenever user requests for a particular web page, it readily sends back the already available HTML page.

When to use SSG ?

For static websites whose content does not change often
Pages which require very minimal user interaction
Pages which do not have dynamic data

Pros

Perfect for SEO heavy websites
Very fast initial loading times

Cons

Rebuild and publish every time when some content needs to be changed.

Suggested Frameworks

Gatsby https://www.gatsbyjs.com/

One framework which supports all

Next JS offers built in support for CSR, SSR as well as SSG.
We can identify parts of our application and apply different kinds of rendering so that our application will have the best performance.