Building Dynamic Web Applications with Next.js/

...

/

Solution: Dynamic Blog Display with Next.js

Solution: Dynamic Blog Display with Next.js

Review the step-by-step solution to the exercise.

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:

Press + to interact
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:

  • ...