1. Browser requests page
2. Server returns minimal HTML shell + JS bundle
3. JS executes in browser
4. JS fetches data from API
5. JS renders HTML into DOM

Request → Empty Shell → JS Downloads → JS Executes → Data Fetches → Content Visible
         [--------------- Time to Interactive (slow) ---------------]

// Pure CSR - data fetched in browser
function ProductPage() {
  const [product, setProduct] = useState(null);
  
  useEffect(() => {
    fetch('/api/products/123')
      .then(res => res.json())
      .then(setProduct);
  }, []);
  
  if (!product) return <Loading />;
  return <Product data={product} />;
}

1. Browser requests page
2. Server fetches data
3. Server renders HTML with data
4. Server sends complete HTML
5. Browser displays content immediately
6. JS hydrates for interactivity

Request → Server Fetches Data → Server Renders → HTML Sent → Content Visible → Hydration → Interactive
          [--- Server Time ---]                              [--- Hydration ---]

// Server-side: runs on each request
async function renderPage(request) {
  const data = await fetchData(request.params.id);
  const html = renderToString(<Page data={data} />);
  return html;
}

Build Time:
1. Build process fetches all data
2. Generates HTML for all pages
3. Outputs static files

Runtime:
1. Browser requests page
2. CDN serves pre-built HTML instantly

Request → CDN Cache Hit → HTML Delivered → Content Visible (instant)

1. Initial build generates static pages
2. Pages served from cache
3. After revalidation time expires:
   - Serve stale page (fast)
   - Regenerate in background
   - Next request gets fresh page

Page generated → Serve for 60 seconds → Regenerate on next request after 60s

CMS publishes → Webhook triggers regeneration → Page updated immediately

1. Browser requests page
2. Server immediately sends HTML shell
3. Server fetches data (possibly in parallel)
4. Server streams HTML chunks as ready
5. Browser renders progressively

Request → Shell Sent → [Chunk 1 Streams] → [Chunk 2 Streams] → Complete
          [Visible]    [More Visible]      [Fully Visible]

Does the page need SEO?
├── No → Does it need real-time data?
│        ├── Yes → CSR
│        └── No → SSG or CSR
│
└── Yes → Is content the same for all users?
          ├── Yes → Does content change often?
          │         ├── Rarely → SSG
          │         ├── Sometimes → ISR
          │         └── Every request → SSR
          │
          └── No (personalized) → SSR with caching strategies

Your Code (JSX, Vue template, Svelte)
        ↓
Framework Virtual Representation (Virtual DOM, reactive graph)
        ↓
HTML String or DOM Operations
        ↓
Browser's DOM Tree
        ↓
Browser's Render Tree (DOM + CSS)
        ↓
Layout (position, size calculations)
        ↓
Paint (pixels on screen)
        ↓
Composite (layers combined)

SERVER RENDERING:
┌─────────────────────────────────────────────────────────────────┐
│ SERVER (powerful, shared)                                       │
│                                                                 │
│  [Fetch Data] → [Build HTML String] → [Send HTML]              │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
                                          │
                                          ▼
┌─────────────────────────────────────────────────────────────────┐
│ CLIENT (varies, individual)                                     │
│                                                                 │
│  [Parse HTML] → [Build DOM] → [Display]                        │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘


CLIENT RENDERING:
┌─────────────────────────────────────────────────────────────────┐
│ SERVER (powerful, shared)                                       │
│                                                                 │
│  [Send static JS bundle]                                        │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
                                          │
                                          ▼
┌─────────────────────────────────────────────────────────────────┐
│ CLIENT (varies, individual)                                     │
│                                                                 │
│  [Download JS] → [Execute JS] → [Fetch Data] → [Build DOM]     │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// What your React component looks like
function ProductPage({ product }) {
  return (
    <div className="product">
      <h1>{product.name}</h1>
      <p>${product.price}</p>
    </div>
  );
}

// What the server actually does (simplified)
function renderToString(component) {
  // 1. Execute component function
  const virtualDOM = component({ product: { name: 'Shoes', price: 99 } });
  
  // 2. virtualDOM is a tree structure:
  // {
  //   type: 'div',
  //   props: { className: 'product' },
  //   children: [
  //     { type: 'h1', children: ['Shoes'] },
  //     { type: 'p', children: ['$99'] }
  //   ]
  // }
  
  // 3. Convert tree to HTML string
  return '<div class="product"><h1>Shoes</h1><p>$99</p></div>';
}

// Browser receives empty HTML:
// <div id="root"></div>

// JavaScript bundle executes:
const root = document.getElementById('root');

// Framework creates elements and appends them
const div = document.createElement('div');
div.className = 'product';

const h1 = document.createElement('h1');
h1.textContent = 'Shoes';

const p = document.createElement('p');
p.textContent = '$99';

div.appendChild(h1);
div.appendChild(p);
root.appendChild(div);

// Each DOM operation triggers browser work

Traditional SSR:
User (Tokyo) → Request → Origin Server (New York) → Process → Response
              [───────────── 200-500ms ──────────────]

Static + CDN:
User (Tokyo) → Request → CDN Edge (Tokyo) → Cache Hit → Response
              [──────────── 20-50ms ────────────]

First Request (cache miss):
1. User requests /products
2. CDN edge has no cache
3. Request goes to origin
4. Origin returns HTML
5. CDN caches it
6. User receives response

Subsequent Requests (cache hit):
1. User requests /products
2. CDN edge has cached HTML
3. Immediate response (no origin contact)

Build Time: Page generated, cached with revalidate: 60

Timeline:
[0s]     Page built, served to all users
[30s]    User A requests → Gets cached page (age: 30s, still fresh)
[60s]    Page is now "stale" but still cached
[61s]    User B requests → Gets stale page immediately
         Background: Server regenerates page
[62s]    New page ready, replaces old in cache
[70s]    User C requests → Gets fresh page (age: 8s)

Normal Response:
HTTP/1.1 200 OK
Content-Length: 5000

[...waits until all 5000 bytes ready...]
[...sends all at once...]


Chunked/Streaming Response:
HTTP/1.1 200 OK
Transfer-Encoding: chunked

100                          ← Chunk size in hex (256 bytes)
<html><head>...</head><body> ← Actual content
0                            ← More chunks coming

200                          ← Next chunk (512 bytes)
<main>Content here...</main>
0

0                            ← Final chunk (0 means done)

// Server Component
async function Page() {
  return (
    <html>
      <body>
        <Header />  {/* Immediate - no data */}
        
        <Suspense fallback={<LoadingSkeleton />}>
          <SlowDataComponent />  {/* Streams when ready */}
        </Suspense>
        
        <Footer />  {/* Immediate - no data */}
      </body>
    </html>
  );
}

// What gets streamed:
// Chunk 1: <html><body><Header>...</Header><LoadingSkeleton />
// [... server fetching SlowDataComponent data ...]
// Chunk 2: <script>swapContent('slow-component', '<SlowData>...</SlowData>')</script>
// Chunk 3: <Footer>...</Footer></body></html>

CSR Request:
[Request]─────[TTFB: 50ms]─────[TTLB: 100ms]
              Small static file, fast to send

SSR Request (blocking):
[Request]─────────────────────[TTFB: 500ms]─────[TTLB: 520ms]
              Server processing delays first byte

SSR Request (streaming):
[Request]───[TTFB: 50ms]─────────────────────────[TTLB: 500ms]
            Shell immediate      Content streams progressively

// Waterfall problem
async function ProductsPage() {
  const products = await fetch('/api/products');  // 1 request
  
  return products.map(product => (
    <Product 
      product={product}
      reviews={await fetch(`/api/reviews/${product.id}`)}  // N requests
    />
  ));
}

// If you have 50 products = 51 requests (serial!)
// Each awaits the previous = massive latency

async function ProductsPage() {
  const products = await fetch('/api/products');
  
  // Fetch all reviews in parallel
  const reviewsPromises = products.map(p => 
    fetch(`/api/reviews/${p.id}`)
  );
  const reviews = await Promise.all(reviewsPromises);
  
  // Now render with all data
}

Problem Scenario:
1. Page generated with product price $99
2. Price changes to $89 in database
3. Cached page still shows $99
4. User sees wrong price

Cache Strategies:

TIME-BASED (ISR):
- Revalidate every 60 seconds
- Pros: Simple, predictable
- Cons: Up to 60s stale data

EVENT-BASED (On-demand revalidation):
- CMS webhook triggers rebuild
- Pros: Immediate freshness
- Cons: Complex, webhook reliability

CACHE TAGS:
- Tag pages by dependency: ['product-123', 'category-shoes']
- Invalidate by tag when data changes
- Pros: Precise invalidation
- Cons: Complex dependency tracking

ORIGIN RENDERING (traditional SSR):
User → CDN Edge → Origin Server (single location) → Response
       [20ms]     [─────── 200ms ───────]

EDGE RENDERING:
User → CDN Edge (runs your code) → Response
       [──────── 50ms ───────]
       No origin round-trip needed

EDGE + ORIGIN:
User → Edge (static parts) → Origin (dynamic parts)
       [──── 50ms ────]     [─── 150ms for dynamic ───]
       Shell immediate       Data streams in

Browser Memory Over Time:
[Page Load] → [JS Parsed: 50MB heap] → [App Runs: 80MB] → [Navigation: 100MB] → ...
                                       Memory grows, garbage collected periodically
                                       Memory leaks possible if state not cleaned

Server Memory Per Request:
[Request] → [Render: 20MB allocated] → [Response Sent] → [Memory freed]
            Fresh start each request
            No memory leaks across requests
            But: concurrent requests = concurrent memory

CSR: Each user's device does rendering work
     1000 users = 1000 CPUs doing work (distributed)

SSR: Server does all rendering work
     1000 users = 1 server CPU doing 1000x work (concentrated)
     
Solution: Caching (SSG/ISR) or scaling servers

// MINIMAL SSR IMPLEMENTATION

// 1. Component to HTML string conversion
function renderToString(element) {
  if (typeof element === 'string' || typeof element === 'number') {
    return escapeHtml(String(element));
  }
  
  if (element === null || element === undefined || element === false) {
    return '';
  }
  
  if (Array.isArray(element)) {
    return element.map(renderToString).join('');
  }
  
  const { type, props } = element;
  
  // Function component
  if (typeof type === 'function') {
    const result = type(props);
    return renderToString(result);
  }
  
  // HTML element
  const attributes = renderAttributes(props);
  const children = renderToString(props.children);
  
  // Void elements (no closing tag)
  if (VOID_ELEMENTS.has(type)) {
    return `<${type}${attributes}>`;
  }
  
  return `<${type}${attributes}>${children}</${type}>`;
}

function renderAttributes(props) {
  return Object.entries(props || {})
    .filter(([key]) => key !== 'children' && !key.startsWith('on'))
    .map(([key, value]) => {
      if (key === 'className') key = 'class';
      if (key === 'htmlFor') key = 'for';
      if (typeof value === 'boolean') {
        return value ? ` ${key}` : '';
      }
      return ` ${key}="${escapeHtml(String(value))}"`;
    })
    .join('');
}

// 2. Full HTML document wrapper
function renderDocument(app, { head, scripts, styles }) {
  return `<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  ${head}
  ${styles.map(s => `<link rel="stylesheet" href="${s}">`).join('\n')}
</head>
<body>
  <div id="app">${app}</div>
  ${scripts.map(s => `<script src="${s}"></script>`).join('\n')}
</body>
</html>`;
}

// 3. Server handler
async function handleSSR(request) {
  const url = new URL(request.url);
  const route = matchRoute(url.pathname);
  
  // Fetch data on server
  const data = await route.loader?.({ request, params: route.params });
  
  // Render component tree
  const app = renderToString(
    createElement(route.component, { data })
  );
  
  // Serialize data for hydration
  const serializedData = `<script>window.__DATA__=${JSON.stringify(data)}</script>`;
  
  const html = renderDocument(app, {
    head: renderHead(route),
    scripts: ['/client.js'],
    styles: ['/styles.css'],
  }) + serializedData;
  
  return new Response(html, {
    headers: { 'Content-Type': 'text/html' },
  });
}

// STREAMING SSR IMPLEMENTATION

async function* renderToStream(element, context) {
  // Yield shell immediately
  yield '<!DOCTYPE html><html><head></head><body><div id="app">';
  
  // Render with suspense boundaries
  yield* renderWithSuspense(element, context);
  
  // Yield closing tags
  yield '</div></body></html>';
}

async function* renderWithSuspense(element, context) {
  if (element.type === Suspense) {
    const suspenseId = context.nextSuspenseId++;
    
    // Yield fallback immediately
    yield `<template id="S:${suspenseId}">`;
    yield renderToString(element.props.fallback);
    yield `</template>`;
    
    // Start async work
    context.pendingBoundaries.push({
      id: suspenseId,
      promise: renderChildren(element.props.children, context),
    });
    
    return;
  }
  
  // Regular element - render synchronously
  yield renderToString(element);
}

// Stream pending boundaries as they complete
async function* flushPendingBoundaries(context) {
  while (context.pendingBoundaries.length > 0) {
    const completed = await Promise.race(
      context.pendingBoundaries.map(b => 
        b.promise.then(html => ({ id: b.id, html }))
      )
    );
    
    // Remove from pending
    context.pendingBoundaries = context.pendingBoundaries.filter(
      b => b.id !== completed.id
    );
    
    // Yield swap script
    yield `<script>
      const template = document.getElementById('S:${completed.id}');
      const content = document.createElement('div');
      content.innerHTML = ${JSON.stringify(completed.html)};
      template.replaceWith(content.firstChild);
    </script>`;
  }
}

// HTTP handler with streaming
async function handleStreamingSSR(request) {
  const stream = new ReadableStream({
    async start(controller) {
      const context = {
        nextSuspenseId: 0,
        pendingBoundaries: [],
      };
      
      // Stream initial content
      for await (const chunk of renderToStream(<App />, context)) {
        controller.enqueue(new TextEncoder().encode(chunk));
      }
      
      // Stream pending boundaries
      for await (const chunk of flushPendingBoundaries(context)) {
        controller.enqueue(new TextEncoder().encode(chunk));
      }
      
      controller.close();
    },
  });
  
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/html',
      'Transfer-Encoding': 'chunked',
    },
  });
}

// STATIC SITE GENERATOR IMPLEMENTATION

async function buildStaticSite(config) {
  const routes = await discoverRoutes(config.pagesDir);
  const outputDir = config.outputDir;
  
  // Parallel build with concurrency limit
  const limit = pLimit(10);
  
  await Promise.all(
    routes.map(route => 
      limit(async () => {
        console.log(`Building ${route.path}...`);
        
        // For dynamic routes, get all possible values
        if (route.isDynamic) {
          const paths = await route.getStaticPaths();
          await Promise.all(
            paths.map(p => buildPage(route, p, outputDir))
          );
        } else {
          await buildPage(route, {}, outputDir);
        }
      })
    )
  );
  
  // Copy static assets
  await copyDir(config.publicDir, outputDir);
  
  // Generate sitemap
  await generateSitemap(routes, outputDir);
}

async function buildPage(route, params, outputDir) {
  // Fetch data at build time
  const data = await route.loader?.({ params });
  
  // Render to string
  const html = renderToString(
    createElement(route.component, { data, params })
  );
  
  // Wrap in document
  const fullHtml = renderDocument(html, {
    head: renderHead(route, data),
    scripts: route.hasInteractivity ? ['/hydrate.js'] : [],
    styles: ['/styles.css'],
  });
  
  // Write to file
  const filePath = path.join(outputDir, route.path, 'index.html');
  await mkdir(path.dirname(filePath), { recursive: true });
  await writeFile(filePath, fullHtml);
}

// ISR IMPLEMENTATION

class ISRCache {
  constructor() {
    this.cache = new Map();
    this.regenerating = new Set();
  }
  
  async get(key, regenerate, { revalidate = 60 }) {
    const entry = this.cache.get(key);
    const now = Date.now();
    
    if (entry) {
      const age = (now - entry.timestamp) / 1000;
      
      // Fresh - return cached
      if (age < revalidate) {
        return { html: entry.html, status: 'HIT' };
      }
      
      // Stale - return cached but regenerate in background
      if (!this.regenerating.has(key)) {
        this.regenerating.add(key);
        this.regenerateInBackground(key, regenerate);
      }
      
      return { html: entry.html, status: 'STALE' };
    }
    
    // Miss - generate synchronously
    const html = await regenerate();
    this.cache.set(key, { html, timestamp: now });
    
    return { html, status: 'MISS' };
  }
  
  async regenerateInBackground(key, regenerate) {
    try {
      const html = await regenerate();
      this.cache.set(key, { html, timestamp: Date.now() });
    } finally {
      this.regenerating.delete(key);
    }
  }
  
  // On-demand revalidation
  revalidate(key) {
    this.cache.delete(key);
  }
  
  // Revalidate by tag
  revalidateTag(tag) {
    for (const [key, entry] of this.cache) {
      if (entry.tags?.includes(tag)) {
        this.cache.delete(key);
      }
    }
  }
}

// HTTP handler with ISR
const isrCache = new ISRCache();

async function handleISR(request) {
  const url = new URL(request.url);
  const route = matchRoute(url.pathname);
  
  const { html, status } = await isrCache.get(
    url.pathname,
    async () => {
      const data = await route.loader({ request });
      return renderToString(createElement(route.component, { data }));
    },
    { revalidate: route.revalidate || 60 }
  );
  
  return new Response(html, {
    headers: {
      'Content-Type': 'text/html',
      'X-Cache-Status': status,
      'Cache-Control': `s-maxage=${route.revalidate}, stale-while-revalidate`,
    },
  });
}