When it comes the performance tradeoffs in application development , rendering methodologies plays an important role.
Generally we classify this as server side rendering and client side rendering but there is more to it. for a detailed study anyone can refer this link https://developers.google.com/web/updates/2019/02/rendering-on-the-web
But in this article i am trying to share a quick introduction to three types of the rendering .
- Static rendering
- Server rendering
- Client side rendering
Before getting into the subject let us check the performance time gaps which we can take for guaging the efficiency of a web application.
TTFB (Time To First Byte) - time between clicking link and first bit of content coming in.
FP (First Paint) - The first time any pixel becomes visible to the user.
FCP (First Content Paint) - The time when requested content becomes visible.
TTI (Time To Interactive) - The time at which a page becomes interactive.
In Server rendering generally produces a first paint(FP) and first contentful paint(FCP) .Running page logic and rendering on the server makes it possible to avoid sending lots of javascript to the client. Which helps to achieve a fast TTI (Time To Interactive) .Primary drawback of SSR is that generating pages on server takes time, which can often result in slower Time To First Byte(TTFB).
Static rendering happens at build time offers a fast First Paint, First Content Paint and Time To Interactive assuming the client side js is limited.
Unlike server side rendering consistantly fast Time To First Byte since the HTML for a page doesnt have to be generated on the fly.
one of the drawback of the static rendering is that it individual HTML files must be generated for every possible Url.
Where as in client side rendering rendering pages directly in the browser using javascript. All logic , data fetching, templpating and routing are handled on the client rather than the server.
The primary downside to client side rendering is that the amount of javascript required tends to grow as an application grows.
Top comments (0)