Improve Server Response Time for Better TTFB

# Static pages (blog posts, docs, landing pages)
# Cache at CDN edge for 1 hour, revalidate in background
Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400

# Dynamic pages with user-specific content
# Cache in browser only, revalidate on every request
Cache-Control: private, no-cache, must-revalidate

# API responses (product data, search results)
# Short edge cache with background revalidation
Cache-Control: public, s-maxage=60, stale-while-revalidate=300

# Truly dynamic (shopping cart, user dashboard)
# No caching, always fresh
Cache-Control: private, no-store

# Static assets (CSS, JS, images with hashed filenames)
Cache-Control: public, max-age=31536000, immutable

// app/blog/[slug]/page.tsx
// ISR: serve cached page, revalidate in background

// Revalidate every 60 seconds
export const revalidate = 60;

// Pre-generate popular pages at build time
export async function generateStaticParams() {
  const posts = await db.post.findMany({
    where: { published: true },
    orderBy: { views: 'desc' },
    take: 100,
  });
  return posts.map(post => ({ slug: post.slug }));
}

export default async function BlogPost({
  params,
}: {
  params: { slug: string }
}) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
  });

  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// TTFB result:
// First request: ~200ms (SSR + cache miss)
// Subsequent: ~20ms (served from CDN edge cache)
// After revalidation: ~20ms (fresh content, still cached)

// BEFORE: N+1 query pattern (50+ queries for 50 posts)
async function getPostsWithAuthors() {
  const posts = await db.post.findMany({ take: 50 });

  // Each iteration triggers a separate query!
  for (const post of posts) {
    post.author = await db.user.findUnique({
      where: { id: post.authorId },
    });
  }
  return posts; // 51 queries, ~500ms
}

// AFTER: Single query with relation (1 query)
async function getPostsWithAuthors() {
  return db.post.findMany({
    take: 50,
    include: {
      author: {
        select: { name: true, avatar: true },
      },
    },
  }); // 1 query, ~15ms
}

// Add application-level caching for frequent queries
import { unstable_cache } from 'next/cache';

const getCachedPosts = unstable_cache(
  async () => {
    return db.post.findMany({
      take: 50,
      include: { author: true },
      orderBy: { publishedAt: 'desc' },
    });
  },
  ['posts-list'],        // Cache key
  { revalidate: 60 }     // Refresh every 60s
);

-- Index for blog post lookups by slug (most common query)
CREATE INDEX idx_posts_slug ON posts(slug)
  WHERE published = true;

-- Composite index for listing pages (order + filter)
CREATE INDEX idx_posts_published_date
  ON posts(published, published_at DESC);

-- Index for author relation lookups
CREATE INDEX idx_posts_author_id ON posts(author_id);

-- Partial index for active users only
CREATE INDEX idx_users_active ON users(email)
  WHERE active = true;

-- EXPLAIN ANALYZE to verify index usage
EXPLAIN ANALYZE
  SELECT * FROM posts
  WHERE published = true
  ORDER BY published_at DESC
  LIMIT 50;

// app/api/search/route.ts
// Runs at the CDN edge, closest to the user

export const runtime = 'edge'; // Deploy to 30+ edge locations

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const query = searchParams.get('q');

  // Use edge-compatible data sources
  // (KV stores, edge databases, cached APIs)
  const results = await fetch(
    `https://api.example.com/search?q=${query}`,
    {
      next: { revalidate: 300 }, // Cache for 5 minutes
    }
  );

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

// TTFB comparison:
// Origin server (us-east-1) from Europe: ~350ms
// Edge function from Europe: ~40ms

// src/worker.ts
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);

    // Try cache first
    const cache = caches.default;
    const cached = await cache.match(request);
    if (cached) return cached; // ~5ms TTFB

    // Generate response at the edge
    const html = renderPage(url.pathname);

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

    // Store in edge cache for future requests
    await cache.put(request, response.clone());

    return response; // ~30ms TTFB (first request)
  },
};

// Vercel: configure caching in middleware
// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();

  // Cache HTML pages at the edge
  if (!request.nextUrl.pathname.startsWith('/api/')) {
    response.headers.set(
      'Cache-Control',
      'public, s-maxage=3600, stale-while-revalidate=86400'
    );

    // Vary on cookie for logged-in vs anonymous
    // (prevents serving cached logged-in page to anonymous users)
    response.headers.set('Vary', 'Cookie');
  }

  return response;
}

// Cloudflare: Page Rules or Cache Rules
// Rule 1: Cache HTML for /blog/*
//   Cache Level: Cache Everything
//   Edge Cache TTL: 1 hour
//   Browser Cache TTL: 5 minutes
//
// Rule 2: Bypass cache for /dashboard/*
//   Cache Level: Bypass

Rendering Strategy         | Typical TTFB | Best For
---------------------------|-------------|---------------------------
Static (SSG)               | 10-50ms     | Blog, docs, marketing
ISR (SSG + revalidation)   | 10-50ms*    | Product pages, listings
Edge SSR                   | 30-100ms    | Personalized content
Streaming SSR              | 50-200ms**  | Complex pages, dashboards
Traditional SSR            | 200-800ms   | Legacy, heavy data
Client-side (CSR)          | 20-50ms***  | SPAs, logged-in apps

* ISR serves cached HTML; revalidation happens in background
** Streaming sends initial HTML immediately, streams rest
*** Fast TTFB but empty HTML; real content requires JS execution

Recommendation: Use SSG/ISR for >80% of pages. Use Edge SSR
for pages that need real-time data. Avoid traditional SSR
unless edge deployment is not possible.

// app/dashboard/page.tsx
// Streaming SSR: send shell immediately, stream data as it loads

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <main>
      {/* Shell renders immediately (fast TTFB) */}
      <h1>Dashboard</h1>
      <nav>/* navigation */</nav>

      {/* Each section streams in as its data resolves */}
      <Suspense fallback={<MetricsSkeleton />}>
        <MetricsSection />  {/* Fetches from DB */}
      </Suspense>

      <Suspense fallback={<ChartSkeleton />}>
        <ChartSection />     {/* Fetches from analytics API */}
      </Suspense>

      <Suspense fallback={<ActivitySkeleton />}>
        <ActivityFeed />     {/* Fetches from activity service */}
      </Suspense>
    </main>
  );
}

// TTFB: ~50ms (shell with loading states)
// Full content: streams in over 200-500ms
// User sees meaningful content immediately