Fix TTFB on Netlify: Optimize Time to First Byte

# netlify.toml
[build]
  publish = "dist"
  command = "npm run build"

# Cache static HTML aggressively
[[headers]]
  for = "/*.html"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"
    # Netlify CDN handles caching automatically for static files
    # Setting max-age=0 ensures browsers revalidate while CDN serves

# Cache static assets with long TTL (hashed filenames)
[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Cache images
[[headers]]
  for = "/images/*"
  [headers.values]
    Cache-Control = "public, max-age=86400, stale-while-revalidate=604800"

# TTFB for static pages on Netlify CDN: 10-30ms globally

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

export default defineConfig({
  output: 'hybrid',  // Static by default, opt-in SSR per page
  adapter: netlify(),
});

// src/pages/blog/[slug].astro
// Static: pre-generated at build time
export async function getStaticPaths() {
  const posts = await getAllPosts();
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;

// src/pages/search.astro
// Dynamic: server-rendered on each request
export const prerender = false; // Opt into SSR for this page only

// netlify/edge-functions/geolocation.ts
// Runs at the edge, closest to the user
import type { Context } from '@netlify/edge-functions';

export default async (request: Request, context: Context) => {
  const { country, city } = context.geo;

  // Personalize content based on location
  const response = await context.next();
  const html = await response.text();

  const personalized = html.replace(
    '{{location}}',
    \`\${city}, \${country}\`
  );

  return new Response(personalized, {
    headers: {
      ...Object.fromEntries(response.headers),
      'Cache-Control': 'public, s-maxage=3600',
      'Vary': 'Accept-Language',
    },
  });
};

export const config = { path: '/store/*' };

// TTFB: ~25ms (edge execution + personalization)

// netlify/edge-functions/product.ts
// Use Netlify Blobs for edge-accessible data
import { getStore } from '@netlify/blobs';
import type { Context } from '@netlify/edge-functions';

export default async (request: Request, context: Context) => {
  const url = new URL(request.url);
  const productId = url.pathname.split('/').pop();

  // Netlify Blobs: edge-accessible key-value store
  const store = getStore('products');
  const product = await store.get(productId, { type: 'json' });

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

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

// TTFB: ~20ms (edge blob read + JSON response)

// netlify/functions/product-page.ts
import { builder } from '@netlify/functions';

const handler = async (event) => {
  const slug = event.path.replace('/products/', '');

  // Fetch product data from CMS or database
  const product = await fetch(
    \`\${process.env.CMS_URL}/api/products/\${slug}\`
  ).then(r => r.json());

  if (!product) {
    return { statusCode: 404, body: 'Product not found' };
  }

  // Render HTML
  const html = renderProductPage(product);

  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'text/html',
      // TTL: cache for 1 hour at CDN edge
      'Netlify-CDN-Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
    body: html,
  };
};

// Wrap with builder() to enable CDN caching
export { handler: builder(handler) };

// First request: ~300ms (function execution + CMS fetch)
// Subsequent requests: ~15ms (served from CDN cache)
// After TTL: ~15ms (stale served, revalidation in background)

# netlify.toml
[[redirects]]
  from = "/products/*"
  to = "/.netlify/functions/product-page"
  status = 200

[[redirects]]
  from = "/categories/*"
  to = "/.netlify/functions/category-page"
  status = 200

# Combined with On-Demand Builders:
# /products/blue-sofa -> function generates HTML -> CDN caches
# Next visitor gets cached response in ~15ms

# netlify.toml

# HTML pages: short browser cache, long CDN cache
[[headers]]
  for = "/*"
  [headers.values]
    # Browser: always revalidate
    Cache-Control = "public, max-age=0, must-revalidate"
    # Netlify CDN: cache for 1 hour, serve stale for 1 day
    Netlify-CDN-Cache-Control = "public, s-maxage=3600, stale-while-revalidate=86400, durable"

# API responses: short cache everywhere
[[headers]]
  for = "/api/*"
  [headers.values]
    Cache-Control = "public, max-age=60"
    Netlify-CDN-Cache-Control = "public, s-maxage=60, stale-while-revalidate=300"

# The 'durable' directive persists cache across deploys
# Without it, every deploy invalidates all cached pages
# With it, pages remain cached unless you explicitly purge them

# Purge specific paths after content updates
# (instead of purging everything on deploy)

# Purge a single path
curl -X POST "https://api.netlify.com/api/v1/purge" \
  -H "Authorization: Bearer $NETLIFY_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"site_id": "your-site-id", "cache_tags": ["product-123"]}'

# In your function, tag responses for selective purging:
return {
  statusCode: 200,
  headers: {
    'Netlify-Cache-Tag': 'product-123,category-furniture',
    'Netlify-CDN-Cache-Control': 'public, s-maxage=86400, durable',
  },
  body: html,
};

[functions]
  # Use esbuild for smaller, faster bundles
  node_bundler = "esbuild"

  # Include only necessary files
  included_files = ["lib/**", "templates/**"]

  # Exclude heavy dev dependencies
  external_node_modules = ["sharp", "@prisma/client"]

[functions."product-page"]
  # Increase memory for complex rendering
  memory = 512  # Default is 128MB

[functions."api-search"]
  # Keep memory low for simple API routes
  memory = 128

// netlify/functions/api.ts
// Reuse connections across warm invocations

// Module-level: persists across warm invocations
let dbPool: Pool | null = null;

function getPool() {
  if (!dbPool) {
    dbPool = new Pool({
      connectionString: process.env.DATABASE_URL,
      max: 5, // Limit connections in serverless
      idleTimeoutMillis: 30000,
    });
  }
  return dbPool;
}

export const handler = async (event) => {
  const pool = getPool();
  const { rows } = await pool.query(
    'SELECT * FROM products WHERE slug = $1',
    [event.queryStringParameters?.slug]
  );

  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
      'Netlify-CDN-Cache-Control': 'public, s-maxage=300',
    },
    body: JSON.stringify(rows[0]),
  };
};

// Cold start: ~400ms (connection init + query)
// Warm invocation: ~20ms (reused connection + query)