Fix TTFB on Cloudflare Pages: Optimize Time to First Byte

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'hybrid',  // Static by default, opt-in SSR
  adapter: cloudflare({
    mode: 'directory', // Recommended for Pages
    runtime: {
      mode: 'local',
      type: 'pages',
    },
  }),
});

// src/pages/blog/[slug].astro
// STATIC: pre-built at deploy time (~10ms TTFB)
export async function getStaticPaths() {
  const posts = await getAllPosts();
  return posts.map(p => ({ params: { slug: p.slug }, props: { post: p } }));
}

// src/pages/search.astro
// DYNAMIC: runs on Workers at edge (~30ms TTFB)
export const prerender = false;

// next.config.js
// Use @cloudflare/next-on-pages for optimal Cloudflare integration
module.exports = {
  // Static pages are pre-rendered and served from edge
  // Dynamic pages run on Workers

  // ISR-like behavior via fetch caching
  experimental: {
    // No need for unstable_cache -- use Cache API directly
  },

  // Headers for static content
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'CDN-Cache-Control',
        value: 'max-age=3600',  // Cloudflare-specific CDN cache
      }],
    }];
  },
};

// Deploy: npx @cloudflare/next-on-pages
// Automatically splits static and dynamic routes

// functions/api/products/[id].ts
// Cache API: store function responses at the edge

export async function onRequestGet(context) {
  const { params, request } = context;
  const cacheKey = new Request(request.url, request);

  // Check edge cache first
  const cache = caches.default;
  const cached = await cache.match(cacheKey);
  if (cached) return cached;  // ~3ms TTFB

  // Cache miss: fetch from origin
  const product = await fetch(
    \`\${context.env.API_URL}/products/\${params.id}\`
  ).then(r => r.json());

  const response = new Response(JSON.stringify(product), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
    },
  });

  // Store in edge cache (non-blocking)
  context.waitUntil(cache.put(cacheKey, response.clone()));

  return response;  // ~50ms TTFB (origin fetch)
  // Next request: ~3ms (edge cache hit)
}

// functions/products/[slug].ts
// Cache rendered HTML pages at the edge

export async function onRequestGet(context) {
  const { params, request, env } = context;

  // Create cache key based on the path (ignore query params for HTML)
  const cacheUrl = new URL(request.url);
  cacheUrl.search = ''; // Normalize cache key
  const cacheKey = new Request(cacheUrl.toString());

  const cache = caches.default;
  const cached = await cache.match(cacheKey);
  if (cached) return cached; // ~3ms

  // Render HTML
  const product = await env.DB.prepare(
    'SELECT * FROM products WHERE slug = ?'
  ).bind(params.slug).first();

  const html = renderProductPage(product);

  const response = new Response(html, {
    headers: {
      'Content-Type': 'text/html',
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });

  context.waitUntil(cache.put(cacheKey, response.clone()));
  return response;
}

// functions/api/config.ts
// KV reads are ~5ms at the edge

export async function onRequestGet(context) {
  const { env } = context;

  // Read from KV (globally distributed, ~5ms)
  const config = await env.SITE_CONFIG.get('homepage', { type: 'json' });

  if (!config) {
    return new Response('Not found', { status: 404 });
  }

  return Response.json(config, {
    headers: {
      'Cache-Control': 'public, max-age=60',
      // KV itself acts as a cache, but CDN caching adds another layer
    },
  });
}

// Populate KV from a build script or webhook:
// wrangler kv:put --binding=SITE_CONFIG "homepage" '{"featured": [...]}'

// functions/api/search.ts
// D1: SQLite at the edge, ~10-20ms queries

export async function onRequestGet(context) {
  const { env, request } = context;
  const url = new URL(request.url);
  const q = url.searchParams.get('q') || '';

  // D1 query runs close to the Worker (no cross-region latency)
  const { results } = await env.DB.prepare(
    'SELECT id, title, excerpt FROM articles WHERE title LIKE ? LIMIT 20'
  ).bind(\`%\${q}%\`).all();

  return Response.json({ results }, {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
    },
  });
}

// D1 query: ~10ms (same-location as Worker)
// vs. external DB: ~100-300ms (cross-region network)
// Combined with Cache API: ~3ms for repeated queries

# wrangler.toml
name = "my-site"
compatibility_date = "2026-04-01"

[placement]
mode = "smart"
# Cloudflare automatically determines optimal placement:
# - Functions with KV/D1 access: run at the edge
# - Functions with external DB calls: run near the database

# Manual override for specific routes:
# [[placement.overrides]]
# pattern = "/api/admin/*"
# mode = "origin"  # Always run near the database

// functions/api/dashboard.ts
// This function queries an external PostgreSQL database
// Smart Placement runs it near the database, not at the edge

export async function onRequestGet(context) {
  const { env, request } = context;

  // External database query (PostgreSQL via Hyperdrive)
  // Hyperdrive provides connection pooling + caching for external DBs
  const client = env.HYPERDRIVE.connectionString;

  const result = await fetch(env.API_URL + '/dashboard-data', {
    headers: { 'Authorization': \`Bearer \${env.API_TOKEN}\` },
  });

  const data = await result.json();

  return Response.json(data, {
    headers: {
      'Cache-Control': 'private, max-age=30',
    },
  });
}

// Without Smart Placement (Worker at edge, DB in us-east):
//   Worker to DB: ~200ms round trip
//   Total TTFB: ~250ms

// With Smart Placement (Worker near DB):
//   Worker to DB: ~5ms round trip
//   Total TTFB: ~40ms

// functions/_middleware.ts
// Apply performance headers to all responses

export async function onRequest(context) {
  const response = await context.next();

  // Clone response to modify headers
  const newResponse = new Response(response.body, response);

  // CDN-Cache-Control: separate from browser Cache-Control
  newResponse.headers.set(
    'CDN-Cache-Control', 'max-age=3600'
  );

  // Early Hints: preload critical resources before HTML arrives
  // (Cloudflare sends 103 Early Hints automatically for Link headers)
  newResponse.headers.set('Link', [
    '</styles/main.css>; rel=preload; as=style',
    '</scripts/app.js>; rel=preload; as=script',
    '<https://api.fontshare.com>; rel=preconnect',
  ].join(', '));

  // Server-Timing: expose performance metrics
  newResponse.headers.set('Server-Timing',
    \`edge;dur=\${Date.now() - context.data.startTime}\`
  );

  return newResponse;
}

# Cloudflare Dashboard -> Caching -> Cache Rules

Rule 1: Cache HTML pages aggressively
  When: URI Path contains "/blog/" OR URI Path contains "/docs/"
  Then:
    - Cache eligibility: Eligible for cache
    - Edge TTL: 1 day
    - Browser TTL: Respect origin
    - Cache Key: Include host, path (ignore query string)

Rule 2: Bypass cache for authenticated routes
  When: Cookie contains "session_id"
  Then:
    - Cache eligibility: Bypass cache

Rule 3: Cache API responses
  When: URI Path starts with "/api/"
  Then:
    - Edge TTL: 5 minutes
    - Respect stale-while-revalidate

# Enable Tiered Caching (Settings -> Caching):
# Reduces origin requests by using upper-tier edge nodes as cache