In a real-world application like a blog platform, you can effectively combine Server-Side Rendering (SSR) and Client-Side Rendering (CSR) to leverage the strengths of both rendering methods:
Example Scenario: Blog Platform
SSR Components: Blog List and Individual Blog Posts
- Why SSR? For SEO benefits and faster initial page loads, which are crucial for content discoverability and user experience.
- Implementation: Use
getServerDataorgetStaticPropsin Next.js to fetch the list of blog posts and individual post details at build time or server time. This ensures that the content is available immediately upon page load, which is beneficial for search engines and first-time visitors.
CSR Components: Comments Section
- Why CSR? Comments are dynamic and frequently updated, and may not necessarily need to be indexed by search engines.
- Implementation: Implement the comments section as a client-side component that fetches data from an API after the initial page load. This reduces server load and build time, and allows for real-time user interaction without the need for full page refreshes.
Implementation Overview
- Blog List Page (
app/blog/page.tsx) – SSR for SEO and initial load:
// app/blog/page.tsx
import Head from 'next/head';
import Link from 'next/link';
export async function getServerData() {
const res = await fetch('https://your-blog-api.com/posts');
const posts = await res.json();
return { props: { posts } };
}
export default function BlogPage({ posts }) {
return (
<>
<Head>
<title>Blog | My Awesome Website</title>
<meta name="description" content="Explore our blog posts about various topics." />
</Head>
<ul>
{posts.map(post => (
<li key={post.id}>
<Link href={`/blog/${post.slug}`}>
<a>{post.title}</a>
</Link>
</li>
))}
</ul>
</>
);
}
Individual Post Page (app/blog/[slug]/page.tsx) – SSR for post content and CSR for comments:
// app/blog/[slug]/page.tsx
import Head from 'next/head';
import dynamic from 'next/dynamic';
const Comments = dynamic(() => import('../../components/Comments'), { ssr: false });
export async function getServerData(context) {
const res = await fetch(`https://your-blog-api.com/posts/${context.params.slug}`);
const post = await res.json();
return { props: { post } };
}
export default function PostPage({ post }) {
return (
<>
<Head>
<title>{post.title} | My Blog</title>
<meta name="description" content={post.excerpt} />
</Head>
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
<Comments postId={post.id} />
</>
);
}
Component Comments – Loaded via CSR for interactive content:
// components/Comments.js
import { useEffect, useState } from 'react';
const Comments = ({ postId }) => {
const [comments, setComments] = useState([]);
useEffect(() => {
async function fetchComments() {
const res = await fetch(`https://your-blog-api.com/posts/${postId}/comments`);
const data = await res.json();
setComments(data);
}
fetchComments();
}, [postId]);
return (
<div>
<h2>Comments</h2>
{comments.map(comment => (
<p key={comment.id}>{comment.text}</p>
))}
</div>
);
};
export default Comments;
This structure ensures that the core content of your blog is rendered server-side for optimal SEO and performance, while dynamic interactions like comments are handled client-side, providing a smooth user experience.