Dynamic Rendering

// DYNAMIC RENDERING FLOW

USER REQUEST:
1. Browser requests https://example.com/product/123
2. Server checks User-Agent header
3. Regular browser → Serve JavaScript application
4. Search crawler (Googlebot, Bingbot) → Render with Puppeteer, serve HTML

---

// SERVER-SIDE IMPLEMENTATION (Node.js example)

const express = require('express');
const puppeteer = require('puppeteer');

const isCrawler = (userAgent) => {
  const crawlers = /bot|crawler|spider|googlebot|bingbot/i;
  return crawlers.test(userAgent);
};

app.get('*', async (req, res) => {
  const userAgent = req.get('User-Agent');
  
  if (isCrawler(userAgent)) {
    // Serve pre-rendered content to crawlers
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(req.url, { waitUntil: 'networkidle2' });
    const html = await page.content();
    res.send(html);
  } else {
    // Serve JavaScript application to users
    res.sendFile('index.html');
  }
});

---

// USING RENDERTRON (Easier approach)

// Install Rendertron service
// Docker: docker run -d -p 3000:3000 rendertron/rendertron

const express = require('express');
const rl = require('request-promise');

app.get('*', async (req, res) => {
  const userAgent = req.get('User-Agent');
  
  if (isCrawler(userAgent)) {
    // Send to Rendertron for rendering
    const renderedHtml = await rl.get(
      `http://localhost:3000/render/${req.url}`
    );
    res.send(renderedHtml);
  } else {
    // Normal request
    res.sendFile('index.html');
  }
});

---

// WHEN TO USE DYNAMIC RENDERING:
✓ Complex single-page applications (React, Vue, Angular)
✓ Heavily JavaScript-dependent content
✓ When you can't refactor to SSR/SSG yet
✓ Temporary workaround while improving architecture

// WHEN NOT TO USE:
✗ Simple websites (use static HTML)
✗ When you can implement SSR/SSG
✗ If it creates content divergence between crawlers and users
✗ As a permanent solution