Server-side rendering with parallel data loading

import { promises as fs } from 'fs';
import path from 'path';

export async function getServerSideProps(context) {
  // Use Promise.all to load data in parallel
  const [userData, productData] = await Promise.all([
    fetch('https://api.example.com/users').then(res => res.json()),
    fetch('https://api.example.com/products').then(res => res.json()),
    // ... add more promises for additional data sources
  ]);

  // Return the data for server-side rendering
  return {
    props: { userData, productData }, // will be passed to the page component as props
  };
}

export default function Page({ userData, productData }) {
  // Render the page with the data loaded server-side
  return (
    <div>
      <h1>Users</h1>
      {/* render users */}
      <h1>Products</h1>
      {/* render products */}
    </div>
  );
}