Many developers still get confused about the different rendering methods available today. Let's understand how each method works and when you should choose it. (Especially if you are using NextJS).
Here's a simple and better explanation:
Let's first understand what rendering means.
Rendering is the process of converting your application code and data into the actual UI that users see in their browser.
CSR (Client-Side Rendering):
In CSR, rendering happens entirely in the browser. When a user visits a page, the browser sends a request to the server, and the server responds with a single html file which contains only an empty div element in it and a huge JS bundle. At the initial phase, the browser only has html file with all the rendering, routing, data fetching logic in a JS bundle. The browser executes the JS bundle and then does the entire rendering part. The JS bundle handles the DOM manipulations, client-side routing, data fetching each and everything inside browser. These applications are known as SPAs (Single Page Applications).
Advantages: Faster navigation between pages, client-side interactivity support.
Disadvantages: Search engines can execute JavaScript, but CSR applications often take longer to crawl and index, making SEO more challenging compared to SSR or SSG. So, SEO issues are there in CSR. Another disadvantage is that browser gets huge JS bundle in initial request which makes the first page load very slow for SPAs applications.
When to use: Internal dashboards or applications which not going to require SEO. Or if you are using NextJS and you need some client-side features, then you can embed a small client component inside a server component.
SSR (Server-Side Rendering):
In SSR the rendering part happens at server side. When a user visits a page, the browser sends request to the server, the server does the rendering part, fetch data from the API (if any), and sends complete html as a response to client. The initial HTML is rendered on the server and sent to the browser. After hydration, React adds client-side interactivity, allowing users to interact with the page normally.
Advantages: The server sends ready-to-render HTML with all content so google crawler can crawl and index pages. Good for SEO. Users see meaningful content sooner because the server sends pre-rendered HTML, improving perceived performance and SEO.
Disadvantages: No client side features. But you can embed a small client component into a server component (if you are using NextJS). For e.g. a button for click events.
When to use: When you need SEO, also cares about first loading time of your application.
SSG (Static Site Generation):
In SSG the rendering part of any web page happens at the build time, and the generated HTML is created during the build process and served as a static file for every request. Whenever user clicks on any SSG page the server directly returns the pre-build html page from cache without rendering it at every request.
Advantages: Pages are rendered once during the build process. Which saves cost and improves performance. Also, the pages are shown to user at higher speed.
Disadvantages: If any page content changed then it won't reflect on the page as it is rendered at build time. In such case you can use ISR via time-based revalidation or on-demand revalidation.
When to use: When your page data rarely changes.
ISR (Incremental Static Regeneration):
ISR allows static pages to be regenerated after deployment through either time-based revalidation or on-demand revalidation. This allows users to receive cached static pages while the content is automatically regenerated through time-based or on-demand revalidation.
Advantages: You can use revalidation techniques of NextJS to revalidate the cache and show the updated.
Disadvantages: If your data changes often and it is important to always show updated data then ISR may not work for you.
When to use: Pages or data which do not change often or stay same for a longer time. Best e.g. Blogs.
Conclusion
All these rendering methods are still very new, and many beginner developers find it difficult to understand and use it where it makes sense. The implementation of each of this rendering methods are different in different frameworks, but the overall concept is still the same.
Top comments (1)
We need to produce a short YouTube comment as a regular developer, casual, one or two sentences, maybe fragment, start with lowercase. Must ask a specific reaction or question about this video. Something like "so when would you choose ISR over SSG?". Must follow developer instructions: no quotes around comment, no markdown. So just plain text. Must avoid double hyphen, em dash, en dash. Use straight quotes if needed. No URLs. No marketing. Keep short. Let's craft: "i get the gist but