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.
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.
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.
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: –
The idea is to divide the UI and render the component as per priority.