Next.js 15 Partial Prerendering (PPR): Kết hợp Vỏ tĩnh với Streaming động

// app/page.tsx
import { Suspense } from 'react';
import { ProductDetails } from '@/components/ProductDetails';
import { ProductRecommendations } from '@/components/ProductRecommendations';
import { UserReviews } from '@/components/UserReviews';
import { Skeleton } from '@/components/Skeleton'; // A simple loading skeleton

interface ProductPageProps {
  params: {
    productId: string;
  };
}

export default async function ProductPage({ params }: ProductPageProps) {
  const productId = params.productId;

  // Static content rendered immediately
  const staticProductInfo = await getStaticProductInfo(productId);

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">{staticProductInfo.name}</h1>
      <img src={staticProductInfo.imageUrl} alt={staticProductInfo.name} className="w-full h-64 object-cover mb-4" />
      <p className="text-gray-700 mb-6">{staticProductInfo.description}</p>

      {/* Dynamic content wrapped in Suspense boundaries */}
      <section className="mb-8">
        <h2 className="text-2xl font-semibold mb-4">Product Details</h2>
        <Suspense fallback={<Skeleton height="h-48" />}>
          {/* ProductDetails is an async component that fetches dynamic data */}
          <ProductDetails productId={productId} />
        </Suspense>
      </section>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold mb-4">Recommendations</h2>
        <Suspense fallback={<Skeleton height="h-32" />}>
          {/* ProductRecommendations is an async component */}
          <ProductRecommendations productId={productId} />
        </Suspense>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Customer Reviews</h2>
        <Suspense fallback={<Skeleton height="h-64" />}>
          {/* UserReviews is an async component */}
          <UserReviews productId={productId} />
        </Suspense>
      </section>
    </div>
  );
}

// Example of a static data fetch (could be from a CMS or build-time data)
async function getStaticProductInfo(productId: string) {
  // Simulate a fast, static data fetch
  return {
    name: `Product ${productId} - Static Title`,
    imageUrl: `/images/product-${productId}.jpg`,
    description: `This is a static description for product ${productId}. It provides general information that doesn't change frequently.`,
  };
}

// components/ProductDetails.tsx
import { delay } from '@/lib/utils'; // Utility for simulating network delay

interface ProductDetailsProps {
  productId: string;
}

export async function ProductDetails({ productId }: ProductDetailsProps) {
  // Simulate a dynamic data fetch (e.g., real-time price, stock)
  await delay(1500); // Simulate network latency
  const price = (Math.random() * 100 + 50).toFixed(2);
  const stock = Math.floor(Math.random() * 200);

  return (
    <div className="border p-4 rounded-lg bg-white shadow-sm">
      <p className="text-xl font-bold text-green-600 mb-2">Price: ${price}</p>
      <p className="text-lg text-gray-800">In Stock: {stock} units</p>
      <button className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
        Add to Cart
      </button>
    </div>
  );
}

// components/ProductRecommendations.tsx
import { delay } from '@/lib/utils';

interface ProductRecommendationsProps {
  productId: string;
}

export async function ProductRecommendations({ productId }: ProductRecommendationsProps) {
  await delay(2500); // Simulate longer network latency for recommendations
  const recommendations = [
    `Related Product A for ${productId}`,
    `Related Product B for ${productId}`,
    `Related Product C for ${productId}`,
  ];

  return (
    <div className="border p-4 rounded-lg bg-white shadow-sm">
      <ul className="list-disc pl-5">
        {recommendations.map((rec, i) => (
          <li key={i} className="text-gray-700">{rec}</li>
        ))}
      </ul>
    </div>
  );
}

// components/UserReviews.tsx
import { delay } from '@/lib/utils';

interface UserReviewsProps {
  productId: string;
}

export async function UserReviews({ productId }: UserReviewsProps) {
  await delay(3000); // Simulate even longer latency for reviews
  const reviews = [
    { user: 'Alice', rating: 5, comment: `Excellent product for ${productId}!` },
    { user: 'Bob', rating: 4, comment: `Good value, but delivery was slow.` },
  ];

  return (
    <div className="border p-4 rounded-lg bg-white shadow-sm">
      {reviews.map((review, i) => (
        <div key={i} className="mb-4 pb-4 border-b last:border-b-0">
          <p className="font-semibold">{review.user} - <span className="text-yellow-500">{'★'.repeat(review.rating)}</span></p>
          <p className="text-gray-700">{review.comment}</p>
        </div>
      ))}
    </div>
  );
}

// components/Skeleton.tsx
interface SkeletonProps {
  height?: string;
}

export function Skeleton({ height = 'h-24' }: SkeletonProps) {
  return (
    <div className={`animate-pulse bg-gray-200 rounded-md ${height}`}></div>
  );
}

// lib/utils.ts
export const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

// app/page.tsx (BAD EXAMPLE)
import { cookies } from 'next/headers';

export default function MyPage() {
  const cookieStore = cookies(); // This makes the whole page dynamic
  const theme = cookieStore.get('theme')?.value || 'light';

  return (
    <div className={`theme-${theme}`}>
      {/* ... rest of your page */}
    </div>
  );
}

// app/page.tsx (GOOD EXAMPLE)
import { Suspense } from 'react';
import { DynamicHeader } from '@/components/DynamicHeader';

export default function MyPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading Header...</div>}>
        <DynamicHeader /> {/* DynamicHeader uses cookies() */}
      </Suspense>
      {/* ... rest of your static page content */}
    </div>
  );
}

// components/DynamicHeader.tsx
import { cookies } from 'next/headers';

export async function DynamicHeader() {
  const cookieStore = cookies();
  const userName = cookieStore.get('userName')?.value || 'Guest';
  return <header>Welcome, {userName}!</header>;
}

// app/dashboard/page.tsx (BAD EXAMPLE)
import { getCriticalMetrics } from '@/lib/api';

export default async function DashboardPage() {
  const metrics = await getCriticalMetrics(); // This fetch blocks the entire page

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Critical Metric: {metrics.value}</p>
      {/* ... other components, potentially in Suspense */}
    </div>
  );
}

// app/dashboard/page.tsx (GOOD EXAMPLE)
import { Suspense } from 'react';
import { CriticalMetrics } from '@/components/CriticalMetrics';
import { SalesChart } from '@/components/SalesChart';

export default function DashboardPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">Dashboard Overview</h1>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold mb-4">Key Performance Indicators</h2>
        <Suspense fallback={<Skeleton height="h-24" />}>
          <CriticalMetrics /> {/* Async component fetching data */}
        </Suspense>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Sales Trends</h2>
        <Suspense fallback={<Skeleton height="h-96" />}>
          <SalesChart /> {/* Another async component */}
        </Suspense>
      </section>
    </div>
  );
}

// components/CriticalMetrics.tsx
import { delay } from '@/lib/utils';

export async function CriticalMetrics() {
  await delay(2000); // Simulate slow API call
  const value = (Math.random() * 1000).toFixed(0);
  return <div className="p-4 border rounded-lg bg-green-50">Current Metric: {value}</div>;
}

// components/ClientCounter.tsx (BAD EXAMPLE for PPR)
'use client';
import { useState, useEffect } from 'react';

export function ClientCounter() {
  const [count, setCount] = useState(0);
  const [dynamicValue, setDynamicValue] = useState(null);

  useEffect(() => {
    // This fetch happens on the client after hydration
    fetch('/api/dynamic-value')
      .then(res => res.json())
      .then(data => setDynamicValue(data.value));
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      {dynamicValue && <p>Dynamic Value: {dynamicValue}</p>}
    </div>
  );
}

// app/page.tsx
import { Suspense } from 'react';
import { ServerFetchedClientCounter } from '@/components/ServerFetchedClientCounter';
import { getInitialCount } from '@/lib/api'; // Server-side data fetch

export default async function HomePage() {
  const initialCount = await getInitialCount(); // Fetch on server
  return (
    <div>
      <h1>Home</h1>
      <Suspense fallback={<div>Loading Counter...</div>}>
        <ServerFetchedClientCounter initialCount={initialCount} />
      </Suspense>
    </div>
  );
}

// components/ServerFetchedClientCounter.tsx
'use client';
import { useState } from 'react';

interface ServerFetchedClientCounterProps {
  initialCount: number;
}

export function ServerFetchedClientCounter({ initialCount }: ServerFetchedClientCounterProps) {
  const [count, setCount] = useState(initialCount); // Initial state from server

  return (
    <div className="border p-4 rounded-lg bg-blue-50">
      <p className="text-lg">Server-initialized Count: {count}</p>
      <button
        onClick={() => setCount(c => c + 1)}
        className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
      >
        Increment
      </button>
    </div>
  );
}

// lib/api.ts
import { delay } from './utils';

export async function getInitialCount() {
  await delay(1000); // Simulate server-side data fetch
  return 42;
}

// components/ErrorBoundary.tsx
'use client';
import React, { Component, ErrorInfo, ReactNode } from 'react';

interface ErrorBoundaryProps {
  children: ReactNode;
  fallback: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
    // You can log the error to an error reporting service here
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// Usage:
// <ErrorBoundary fallback={<div>Something went wrong loading recommendations.</div>}>
//   <Suspense fallback={<Skeleton height="h-32" />}>
//     <ProductRecommendations productId={productId} />
//   </Suspense>
// </ErrorBoundary>