Server Rendering, SSG and React Server Components

import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

// ProductPage.jsx — a Server Component (no directive needed in an RSC framework)
import db from './db';
import AddToCart from './AddToCart';        // a Client Component

export default async function ProductPage({ id }) {
  const product = await db.product.find(id);   // runs on the server
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.price}</p>
      <AddToCart productId={product.id} />     {/* interactive island */}
    </article>
  );
}

// AddToCart.jsx
'use client';
import { useState } from 'react';

export default function AddToCart({ productId }) {
  const [added, setAdded] = useState(false);
  return <button onClick={() => setAdded(true)}>{added ? 'Added' : 'Add to cart'}</button>;
}

// app/products/[id]/page.jsx — Server Component: indexable HTML on first byte
import db from '@/lib/db';
import LiveStock from './LiveStock';
import Recommendations from './Recommendations';

export async function generateMetadata({ params }) {
  const p = await db.product.find(params.id);
  return { title: p.name, description: p.summary };
}

export default async function Page({ params }) {
  const p = await db.product.find(params.id);      // rendered on the server
  return (
    <article>
      <script type="application/ld+json" dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          '@context': 'https://schema.org', '@type': 'Product',
          name: p.name, description: p.summary, offers: { '@type': 'Offer', price: p.price },
        }),
      }} />
      <h1>{p.name}</h1>
      <p>{p.summary}</p>
      <p className="price">{p.price}</p>

      <LiveStock sku={p.sku} />              {/* 'use client' — AJAX after hydration */}
      <Recommendations productId={p.id} />  {/* 'use client' — AJAX after hydration */}
    </article>
  );
}

// app/products/[id]/LiveStock.jsx
'use client';
import { useQuery } from '@tanstack/react-query';

export default function LiveStock({ sku }) {
  const { data } = useQuery({
    queryKey: ['stock', sku],
    queryFn: () => fetch(`/api/stock/${sku}`).then((r) => r.json()),  // client-side AJAX
    refetchInterval: 30_000,
  });
  if (!data) return <p>Checking availability…</p>;
  return <p>{data.inStock ? `${data.count} in stock` : 'Out of stock'}</p>;
}