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>;
}