Serving Strategies
Published: 2021-12-10 14:52:57

**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 :

1. CSR (Client-side rendering)
2. SSR (Server side rendering)
3. SSG (Static site generation)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4979p6bv5jlq3ua6s2f.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1o3ljmemw3de9lz2t0u.png)

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.