Search⌘ K
AI Features
Home
Courses
Building Dynamic Web Applications with Next.js

Solution: Dynamic Blog Display with Next.js

Explore how to display dynamic blog posts in Next.js using server-side rendering (SSR) and client-side rendering (CSR). Learn to fetch data on the server before page load and on the client after component mount, understanding key Next.js rendering strategies for dynamic content.

We'll cover the following...

In the exercise, we were supposed to display the blog posts using the following methods:

  • Server-side blog rendering

  • Client-side blog rendering

Let’s review the solution for each technique.

Server-side blog rendering

You can find the solution code for this method here:

JavaScript (JSX)
import axios from 'axios';
import Link from 'next/link';
export default function ServerBlogPosts({ posts }) {
  return (
    <div>
      <div>
        <Link href="/serverPosts"> View Server blog posts </Link>
        <br/>
        <Link href="/clientPosts"> View Client blog posts </Link>
      </div>
      <h1>Server Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
export async function getServerSideProps() {
  const response = await axios.get('{{EDUCATIVE_LIVE_VM_URL}}:3000/api/posts');
  const posts = response.data;
  return {
    props: {
      posts,
    },
  };
}

Here’s the breakdown of the SSR code presented above:

  • ...