CSR, SSR and SSG (Pt. 02) — Pros & Cons
In the previous article we had an introduction to the three rendering techniques named, Client Side Rendering, Server Side Rendering and Static Site Generation. Target of this article is to discuss use cases of these three techniques by understanding pros and cons.
To understand the pros and cons, we should have some idea on few terminologies first.
Terminologies
Time To First Byte (TTFB)
TTFB is the interval between a request sent time and the first byte arrived time. In this scenario, this is the time interval between the browser sending the request for a webpage and receiving the first byte as the response.
First Contentful Paint (FCP)
TCP refers to the time interval between the webpage starts loading to when any non-white element is rendered on the screen. In FCP, “content” can be any non-white elements including text, images, svg, etc.
Time To Interactive (TTI)
TTI refers to the time interval between the webpage starts loading to when the webpage is able to reliably respond to user inputs.
How we have an idea on few terminologies, and let’s take the rendering techniques one by one.
Pros and Cons
CSR
- Client browser is doing most of the processing part. Less load on the web server.
- TTFB and FCP are relatively fast since the page can be rendered portion by portion. The browser execute the logic and API requests, then paint the content continuously.
- TTI also can be fast, since the layout can be rendered initially without the heavy content.
- Not optimal for SEO since the HTML is not directly fed.
SSR
- Optimal solution for SEO. Search engines can crawl and index pages.
- Slower TTFB, since the web server process the whole webpage and respond to the request.
- Both FCP and TTI is also slower.
- Since the web server handles all the processing, the load on web server is higher.
SSG
- All the TTFB, FCP and TTI can be much faster. Web pages are pre-rendered at build time and there won’t be much processing on client browser or web server.
- Hosting a static website is very fast and cheap.
- Not the optimal solution for dynamic web contents. Web pages are rendered during the build time and all the data included will be a snapshot of the build time.
Wrapping up
Choosing the right rendering technique can be tricky. There is no technique called the best one. All three techniques can be used according to your use cases. As an example, SSG is better for a static business website. CSR can be the best fit for highly dynamic web pages. There are modern frameworks that supports all three rendering techniques out of the box. Next.js is one of the popular framework.
Hope you enjoyed the article! Feel free to leave a comment if you have any questions or feedback. Peace ✌️
