I'm working on a Next.js project and aiming to enhance performance by implementing Server-Side Rendering (SSR) while dynamically fetching data. I'm currently facing challenges in setting up SSR and integrating it with dynamic data fetching mechanisms. How can I effectively combine SSR with dynamic data fetching in Next.js? Any code examples or best practices would be greatly appreciated!

// Example of dynamic data fetching in a Next.js application

import React from 'react';
import fetch from 'isomorphic-unfetch';

const DynamicDataPage = ({ data }) => {
  return (
    <div>
      <h1>Dynamic Data Page</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API or database
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default DynamicDataPage;