In this post, I will be covering different types of rendering. To understand rendering and its pros and cons. We must know when a user lands on a page.
- The page is visible when the HTML is rendered.
- The page becomes interactive when javascript execution is complete.
Server-Side Rendering
In Server Side Rendering, the HTML is generated at the server and sent to the client. Due to this, the user can view the page instantly.
Pros: Fast First Paint(FCI), First Contentful Paint(FCP), Time to Interactive(TTI), SEO
Cons:Slower TTFB, High server consumption
Static Rendering or Pre-Rendering:
In Static Rendering, the HTML is generated at build time. That is, as the name denotes for every URL the HTML is created at build time like a static website.
Pros:FCI, FCP, TTI, TTFB, SEO.
Cons: Not feasible for a dynamic website, creating HTML for a website that has many pages will lead to high resource consumption.
Client-Side Rendering
In Client-side rendering the browsers get a simple HTML with one or more javascript files then the Browser fetches those files and starts creating HTML using frameworks like React, Angular, etc.
All subsequent load after Initial load is faster in Client-side rendering because you just fetch the data in JSON format instead of entire HTML.
Pros: Rich site interaction, Fast website rendering after Initial load.
Cons: The amount of javascript executed is high at the client side which requires high processing power. Many libraries solve this problem using code splitting which divides the js files into many smaller chunks and gets loaded only when required.
We want the best of both worlds, to deliver initial content as fast as possible (Server Side Rendering) and reduce the time to get it interactive(Client Side Rendering).
The Solution: –
Progressive Hydration:
Progressive Hydration tweak Client-Side Rendering a little bit to overcome CSR cons. The problem with CSR was bundle size, Can we reduce the javascript executed on the client-side? How?
The idea is to divide the UI and render the component as per priority.
This helps us to fetch the js files of non-priority components only when required eg only when it comes to the viewport. This improves performance significantly as the Javascript shipped can be reduced.
References:
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
