// ❌ renderToString — the synchronous baseline
import { renderToString } from 'react-dom/server'

export async function GET(request: Request) {
  // All data must be fetched BEFORE rendering begins
  const [product, reviews, recommendations] = await Promise.all([
    getProduct(params.id),      // 40ms
    getReviews(params.id),      // 800ms  ← slowest determines TTFB
    getRecommendations(params.id), // 200ms
  ])

  // renderToString blocks until the full tree is rendered to a string
  const html = renderToString(
    <ProductPage product={product} reviews={reviews} recommendations={recommendations} />
  )

  // The browser receives nothing until all 800ms have elapsed
  return new Response(`<!DOCTYPE html>${html}`, {
    headers: { 'Content-Type': 'text/html' },
  })
}
// TTFB = max(40, 800, 200) + render time ≈ 820ms+

import { renderToPipeableStream } from 'react-dom/server'
import { createServer } from 'http'

createServer((req, res) => {
  const { pipe, abort } = renderToPipeableStream(<App />, {

    // bootstrapScripts: the client bundle(s) to attach to the HTML
    // React needs these to hydrate the server-rendered HTML on the browser
    bootstrapScripts: ['/static/js/main.js'],

    // onShellReady: fires when the synchronous shell is ready
    // Use this for BROWSER requests — enables streaming
    onShellReady() {
      res.statusCode = 200
      res.setHeader('Content-Type', 'text/html')
      pipe(res) // Starts streaming immediately — Suspense fallbacks sent first
    },

    // onAllReady: fires when the ENTIRE tree has resolved (no pending Suspense)
    // Use this ONLY for static crawlers, PDF generators, or search engines
    // DO NOT use for browser requests — it defeats the entire purpose of streaming
    onAllReady() {
      // Only use here if you checked the user agent is a crawler
    },

    onShellError(error) {
      // The shell itself failed to render — send a fallback error page
      res.statusCode = 500
      res.setHeader('Content-Type', 'text/html')
      res.end('<h1>Something went wrong</h1>')
    },

    onError(error) {
      // A Suspense boundary or an async component threw
      // Logged server-side; the ErrorBoundary handles it client-side
      console.error(error)
    },
  })

  // Abort if the client disconnects after 10 seconds
  setTimeout(abort, 10_000)
}).listen(3000)

<!-- What the browser receives initially for a pending Suspense boundary -->
<!--$?-->
<template id="B:0"></template>
<div class="reviews-skeleton">Loading reviews...</div>
<!--/$-->

<!-- Later in the same stream, when Reviews resolves: -->
<div hidden id="S:0">
  <!-- The fully rendered Reviews HTML -->
  <article class="review">...</article>
  <article class="review">...</article>
</div>
<script>
  // React's inline resolver script
  $RC("B:0", "S:0") // Replace boundary B:0 with content S:0
</script>

// useDeferredValue — marks a subtree as low-priority for hydration
// React will hydrate this subtree after urgent work is complete
function SearchPage({ query }) {
  const deferredQuery = useDeferredValue(query) // Low-priority

  return (
    <div>
      <SearchInput value={query} /> {/* Hydrates immediately (urgent) */}
      <Suspense fallback={<ResultsSkeleton />}>
        <SearchResults query={deferredQuery} /> {/* Hydrates when the scheduler is free */}
      </Suspense>
    </div>
  )
}

// Each interactive section wrapped in its own Suspense boundary
// enables selective hydration prioritization
export default function ArticlePage() {
  return (
    <article>
      <ArticleHeader />  {/* Hydrated first — synchronous shell */}

      <Suspense fallback={<CommentsSkeleton />}>
        <CommentsSection />  {/* Boundary A — can be prioritized if user clicks here */}
      </Suspense>

      <Suspense fallback={<RelatedSkeleton />}>
        <RelatedArticles />  {/* Boundary B — lower priority */}
      </Suspense>
    </article>
  )
}

// ❌ Cause 1: timestamps and dates rendered server-side
function PublishedAt({ date }: { date: Date }) {
  // new Date() formats differently in Node.js (server) vs. browser (different timezone)
  return <time>{date.toLocaleDateString()}</time>
}

// ✅ Fix: use a stable, locale-independent format server-side; format client-side with useEffect
function PublishedAt({ date }: { date: Date }) {
  const [formatted, setFormatted] = useState(date.toISOString().slice(0, 10))
  useEffect(() => {
    setFormatted(date.toLocaleDateString()) // Format client-side after hydration
  }, [date])
  return <time suppressHydrationWarning>{formatted}</time>
}

// ❌ Cause 2: Math.random() or crypto.randomUUID() in component render
function TooltipTarget() {
  const id = Math.random().toString(36) // Different every render — guaranteed mismatch
  return <span aria-describedby={id}>Hover me</span>
}

// ✅ Fix: stable IDs from useId() — SSR-safe, hydration-safe
function TooltipTarget() {
  const id = useId() // React 18+ — generates a stable ID consistent across SSR and hydration
  return <span aria-describedby={id}>Hover me</span>
}

// ❌ Cause 3: browser API calls in component render
function ScreenWidth() {
  return <span>Width: {window.innerWidth}px</span> // window is undefined on server
}

// ✅ Fix: check environment or use useEffect for browser-only values
function ScreenWidth() {
  const [width, setWidth] = useState<number | null>(null)
  useEffect(() => { setWidth(window.innerWidth) }, [])
  return <span>{width !== null ? `Width: ${width}px` : 'Measuring...'}</span>
}