In Next.js, different rendering techniques impact performance and user experience. This post will cover Client Side Rendering (CSR), Server Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR)
The Build Process
Before diving into the specifics of each rendering technique, it's important to understand the basic build process
Source Code : This is the code written in JavaScript files
Build Phase : During the build phase, the source code is processed and optimized. This is when commands like
npm run buildare executedServer : The built files are stored on a server, which could be Vercel, Netlify, or a Static server
Client : The client, such as a web browser, requests and receives web pages from the server
Client Side Rendering (CSR)
With Client-Side Rendering (CSR), the majority of the work is done on the client-side
The server sends an empty HTML page to the client
The server also sends JavaScript files
The client's browser then executes the JavaScript code to render the web page
The entire web page is built on the client side
If more JavaScript or CSS is needed, the client requests it from the server
While CSR can provide a Dynamic User Experience, it has some Drawbacks:
Poor Search Engine Optimization (SEO) : Since the initial HTML is empty, search engines have nothing to crawl, which hurts SEO
Initial Load Time : Users may experience a delay while the JavaScript is downloaded and executed
CSR is suitable for web applications like SaaS dashboards where SEO is not a primary concern
// App Router Example
'use client'; // This Flag used to render page on client-side
import { useEffect, useState } from "react";
export default function Page() {
const [stockData, setStockData] = useState([]);
const apiCall= async () => {
const data = await fetch('https://api.freeapi.app/api/v1/public/stocks?page=1&limit=2&inc=Symbol%2CName%2CMarketCap%2CCurrentPrice&query=tata')
const result= await data.json()
setStockData(result?.data?.data || [])
}
useEffect(() => {
apiCall()
}, [])
return (
<>
<h1>CSR Example</h1>
<ul>
{stockData.map((stock) => (
<li key={stock.id}>{stock.Name}</li>
))}
</ul>
</>
)
}
Server-Side Rendering (SSR)
In Server-Side Rendering (SSR), the rendering process happens on the server
When the client makes a request, the server retrieves the necessary data
The server then renders the web page and sends the complete HTML to the client
Every time the client requests a new page, the server repeats the process
SSR offers several advantages :
Improved SEO : Search engines can crawl the fully rendered HTML, leading to better SEO
Faster Initial Load Time : The client receives a fully rendered page, improving the initial load time
However, SSR also has some drawbacks :
Server Load : The server has to render the page for every request, which can increase server load
Time Consumption : Although the server has more computing power, the rendering process still takes time
// App Router Example
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post: any) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
Static Site Generation (SSG)
Static Site Generation (SSG) generates web pages at build time
During the build process, each page is rendered and saved as static HTML files.
These pre-rendered pages are then stored on the server.
When a client requests a page, the server simply sends the corresponding HTML file.
SSG offers significant performance benefits :
Fast Loading Times : Since the pages are pre-rendered, they load very quickly.
Reduced Server Load : The server only needs to serve static files, which reduces server load.
Improved SEO : Static Site Generation (SSG) improves SEO because search engines can easily crawl the static HTML files. These files are pre-rendered and stored on the server, allowing search engines to access and index the content efficiently, which enhances visibility and ranking in search results.
SSG is ideal for websites with content that doesn't change frequently, such as Blogs or documentation sites. However, it may not be suitable for sites with frequently updating content.
Incremental Static Regeneration (ISR)
Incremental Static Regeneration (ISR) is a hybrid approach that combines the benefits of SSG and SSR.
Like SSG (Static Site Generation), ISR generates static pages at build time.
However, ISR also allows you to re-generate pages in the background at specified intervals.
This ensures that the content is updated regularly without sacrificing performance.
ISR offers a balance between Performance and Content Freshness :
Updated Content : Content can be updated at specified intervals.
Performance : Because it leverages static generation, it still delivers great performance.
ISR is suitable for websites where content updates periodically.
Choosing the Right Approach
Selecting the right rendering technique depends on the specific needs of your project.
Build Time : How important is build time ?.
Dynamic Content : How often does the content get updated ?.
SEO : How valuable is search engine optimization ?.
Rendering Time : Is build time or server-client time more important ?.
Content Update : How often do you want your content to update ?.
There is no one-size-fits-all solution. Each technique has its own trade-offs, and the best choice depends on the specific requirements of your website or application.
Conclusion
In conclusion, understanding the different rendering techniques in Next.js Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) is crucial for optimizing performance and user experience
If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on JavaScript, React.js, Next.js, and other web Development topics.
For Paid collaboration, Web Development freelancing work, mail me at: krishdesai044@gmail.com
Connect with me on Twitter, LinkedIn, and GitHub.
Thank you for Reading
Happy Coding