Learn the concept
Rendering Strategies & Critical Rendering Path
CSR (Client-Side Rendering) renders in browser. SSR (Server-Side Rendering) generates HTML on each request. SSG (Static Site Generation) pre-builds HTML at build time. SSR/SSG improve initial load and SEO; CSR is simpler but slower first paint.
CSR (Client-Side Rendering):
SSR (Server-Side Rendering):
SSG (Static Site Generation):
Hybrid (ISR):
// SSG - Static Site Generation (default for pages without data)
export default function HomePage() {
return <h1>Home</h1>;
}
// SSG with data
export async function getStaticProps() {
const posts = await fetchPosts();
return {
props: { posts },
revalidate: 3600, // ISR: Regenerate every hour
};
}
export default function Blog({ posts }) {
return posts.map(post => <PostCard key={post.id} post={post} />);
}
// SSG for dynamic routes
export async function getStaticPaths() {
const posts = await fetchPosts();
return {
paths: posts.map(post => ({ params: { slug: post.slug } })),
fallback: 'blocking', // SSR for new paths
};
}
// SSR - Server-Side Rendering
export async function getServerSideProps(context) {
const user = await getUser(context.req.cookies.token);
return {
props: { user },
};
}
export default function Dashboard({ user }) {
return <h1>Welcome, {user.name}</h1>;
}Using Static Site Generation (SSG) to pre-render pages at build time, resulting in lightning-fast load times, excellent SEO, and reduced server costs.
Employing Server-Side Rendering (SSR) to render initial product pages on the server, improving perceived performance and SEO for constantly changing inventory and personalized content.
Where Client-Side Rendering (CSR) is suitable due to high interactivity, frequent data updates, and often being behind authentication, making initial SEO less critical.
Develop a simple blog application using Next.js with Server-Side Rendering (SSR) for initial page loads and data fetching.
Build a static documentation website that uses Static Site Generation (SSG) to pre-render all content, ensuring optimal performance and deployability to a CDN.
Netflix uses SSR for its landing pages and initial user interface to improve perceived performance and SEO, ensuring a fast and engaging experience before the full client-side application takes over.
Many of Stripe's public-facing marketing and documentation sites leverage SSG for extreme performance and reliability, while their dashboard and payment flows do use a mix of SSR and CSR for dynamic and interactive elements.