__experimental.SSGPage

// Regular synchronous SSG page component
const BlogPost: SSGPage<{ slug: string }> = ({ params }) => {
  return (
    <article>
      <h1>Blog Post: {params.slug}</h1>
      <p>This content was generated at build time!</p>
    </article>
  );
};

// Async React Server Component for data fetching
const AsyncBlogPost: SSGPage<{ slug: string }> = async ({ params }) => {
  // Fetch data during static generation
  const post = await fetchBlogPost(params.slug);
  const author = await fetchAuthor(post.authorId);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {author.name}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
};

// Product page with multiple params and async data fetching
const ProductPage: SSGPage<{ category: string; id: string }> = async ({ params }) => {
  const [product, reviews] = await Promise.all([
    fetchProduct(params.category, params.id),
    fetchProductReviews(params.id)
  ]);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Category: {params.category}</p>
      <p>Price: ${product.price}</p>
      <div>
        <h2>Reviews ({reviews.length})</h2>
        {reviews.map(review => (
          <div key={review.id}>{review.comment}</div>
        ))}
      </div>
    </div>
  );
};