As developers, you are faced with decision to choose stack which will affect the entire architecture of the web application. It depends on the usecase of the application and so it does define where to implement logic and rendering in their application.
This blog is written to demonstrate various approaches of rendering on web and discussing the pros and cons of each way. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.
Web performance is itself a large field, but with the advent of NextJS. It becomes easy to demonstrate the effect of different rendering approaches under its umbrella.
Do open network tab in chrome devtools .
- Client SIde Rendering
- Server Side Rendering
- Static Side Generation
Client Side Rendering
Client-side rendering (CSR) means rendering pages directly in the browser using JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server.
- Server renders the page without any dynamic data
- Client Immediately shows the page (without any dynamic data)
- Page displays a loading state (for missing dynamic data)
- NextJS makes all of the API calls (to fetch dynamic data)
- NextJS renders the missing dynamic data on the client side
👉 Check that there is no data like neighbouring countries in the source code of the /csr route of the project
This diagram can be verified in the network tab of chrome dev tools. In this project, take note of TTFB (Time to First Byte) and compare.
| Pros of CSR |
| 1. Fast Server Side Rendering |
| 2.Page gets displayed immediately |
| 3. Build Single Page Application |
| Cons of CSR |
| 1. No initial render of dynamic data |
| 2. Bad for SEO |
Server Side Rendering
Server-side Rendering or SSR generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.
This diagram can be verified in the network tab of chrome dev tools. In this project, take note of TTFB (Time to First Byte) and compare.
👉 In this project as well, you can see there is no loading state as it were in the csr route. The content is prerendered on the server and sent to client. It does increase the TTFB.
👉What NextJS does fantastically well is it provides <Link/> tag that supports prefetch of the content and NextJS sents an API reques to the server and server runs the getserversideprops,
server returns json as a response NextJS uses the JSON to render the page and provides wonderful experience for the heavy server side rendered pages so that first interaction gets quicker on client side page request.
| Pros of SSR |
| 1. Dynamic content is readily available |
| 2. Good for SEO |
| 3. Page has no blank loading state, since its pre rendered. |
| Cons of SSR |
| 1. Slowest TTFB (due to pre-rendering) |
| 2. Results cannot be cached by CDN without extra configuration |
| 3. Results cannot be cached by a CDN without extra CDN. |
Static Rendering or Static Site Generation
Static Rendering happens at build time, the pages are pregenerated with static content and markup and has very low client side javascript. Static renders can be deployed to multiple CDNs to take advantage of edge-caching. This gives the ability to load the static content in a fastest manner, the only time it takes is during bundling and build of the code. Each page is part of the build and thus there is increased bundle size, but it is fair with the usecase.
👉In this project, you can experience the loading speed of statically generated page on /ssg route. You can also checkout my portfolio at www.agrittiwari.com which has articles section as demonstration of SSG.
👉Do check the source code of /ssg page as it will have all of the content in it which was absent in the /csr.
👉 You can read about Incremental Static Regeneration here which is a wonderful add-on on Static Site Generation here
| Pros of SSG |
| 1. Incredibly fast. |
| 2. Built once and pages get cached by CDN for a long time. |
| 3. Great for SEO. |
| 4. Build offline progressive web apps. |
| Cons of SSG |
| 1. Slow Server Side site builds. |
| 2. Build time gets more as the static pages increase in the bundle. |
| 3. Not good for frequently changing content portions. |
Conclusion 🧐
So, the web rendering is subjected to the use case and business requirement as it has been classified and developed based on its merits and demerits. I hope you learnt something from the article and you can refer to the repository of this project I built for a talk in a community (devKode).
Feel free to star ⭐️ the project if you found useful - github.com/agrittiwari/devkode-novembertalks-nextjs
Buy me a book 📚
Thank you 😇👋
