Fix TTFB on AWS Amplify: Optimize Time to First Byte

// app/blog/[slug]/page.tsx
// ISR on Amplify: cached at CloudFront edge

export const revalidate = 3600; // Revalidate every hour

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

// Amplify Gen 2 translates revalidate to:
// Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400
// CloudFront caches the response for 1 hour
// Serves stale content while revalidating in background

// next.config.js -- explicit headers for non-ISR pages
module.exports = {
  async headers() {
    return [{
      source: '/docs/:path*',
      headers: [{
        key: 'Cache-Control',
        value: 'public, s-maxage=86400, stale-while-revalidate=604800',
      }],
    }];
  },
};

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';

const backend = defineBackend({});

// Customize CloudFront cache behavior for SSR routes
const cfDistribution = backend.getConstruct('ServerCdnDistribution');

// Enable Origin Shield in the region closest to your origin
// Reduces origin requests by 60-90%
cfDistribution.node.defaultChild.addPropertyOverride(
  'DistributionConfig.Origins.0.OriginShield',
  {
    Enabled: true,
    OriginShieldRegion: 'us-east-1',
  }
);

// CloudFront Function: normalize URLs for better cache hit rates
function handler(event) {
  var request = event.request;
  var uri = request.uri;

  // Add trailing slash (normalizes /blog and /blog/ to same cache key)
  if (uri.length > 1 && !uri.endsWith('/') && !uri.includes('.')) {
    return {
      statusCode: 301,
      statusDescription: 'Moved Permanently',
      headers: {
        location: { value: uri + '/' },
        'cache-control': { value: 'public, max-age=3600' },
      },
    };
  }

  // Add index.html for directory requests
  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  }

  // Remove marketing query params (improve cache key)
  var params = request.querystring;
  delete params.utm_source;
  delete params.utm_medium;
  delete params.utm_campaign;
  delete params.fbclid;
  delete params.gclid;

  return request;
}

// Execution: <1ms at edge
// Impact: Normalizes URLs for 20-40% higher cache hit rate

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';

const backend = defineBackend({});

// Increase Lambda memory (also increases CPU proportionally)
// 512MB = 0.5 vCPU, 1024MB = 1 vCPU, 1769MB = 1 full vCPU
const ssrFunction = backend.getConstruct('ServerFunction');
ssrFunction.node.defaultChild.addPropertyOverride('MemorySize', 1024);
ssrFunction.node.defaultChild.addPropertyOverride('Timeout', 10);

// Memory comparison for SSR execution:
// 128MB: ~800ms cold start, ~400ms warm execution
// 512MB: ~400ms cold start, ~150ms warm execution
// 1024MB: ~250ms cold start, ~80ms warm execution
// 1769MB: ~180ms cold start, ~50ms warm execution

// Provisioned concurrency: keep N instances warm (eliminates cold starts)
// Note: this costs more -- only for critical high-traffic routes
// Configure via CDK override on the Lambda function

// next.config.js -- optimized for Amplify
module.exports = {
  output: 'standalone',  // Produces minimal server bundle

  experimental: {
    // Externalize large packages from the Lambda bundle
    serverComponentsExternalPackages: ['sharp', '@aws-sdk/client-s3'],
  },

  // Enable SWC minification (faster builds, smaller output)
  swcMinify: true,

  // Reduce image processing overhead
  images: {
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 86400,
  },
};

// Bundle size impact on cold starts:
// 5MB bundle: ~300ms download + init
// 15MB bundle: ~800ms download + init
// 50MB bundle: ~2000ms download + init
// Target: < 10MB for sub-500ms cold starts

// lib/cache.ts
// Module-level cache persists across warm Lambda invocations

const cache = new Map<string, { data: any; expiry: number }>();

export function getCached<T>(key: string): T | null {
  const entry = cache.get(key);
  if (!entry) return null;
  if (Date.now() > entry.expiry) {
    cache.delete(key);
    return null;
  }
  return entry.data as T;
}

export function setCache(key: string, data: any, ttlMs: number) {
  cache.set(key, { data, expiry: Date.now() + ttlMs });
  // Prevent memory leaks: limit cache size
  if (cache.size > 1000) {
    const oldestKey = cache.keys().next().value;
    cache.delete(oldestKey);
  }
}

// Usage in a server component:
export async function getProduct(slug: string) {
  const cached = getCached(`product:${slug}`);
  if (cached) return cached;  // ~0ms

  const product = await db.product.findUnique({ where: { slug } });
  setCache(`product:${slug}`, product, 60_000); // Cache 60s
  return product;  // ~50ms (DB query)
}

// Warm invocation with cache hit: ~5ms total
// Warm invocation with cache miss: ~50ms (DB)
// Cold invocation: ~300ms (init) + ~50ms (DB)

// amplify/backend.ts -- CloudWatch alarms via CDK
import * as cloudwatch from 'aws-cdk-lib/aws-cloudwatch';

// Alarm if Lambda p95 duration exceeds 500ms
new cloudwatch.Alarm(stack, 'SSRLatencyAlarm', {
  metric: ssrFunction.metricDuration({ statistic: 'p95' }),
  threshold: 500,
  evaluationPeriods: 3,
  comparisonOperator: cloudwatch.ComparisonOperator
    .GREATER_THAN_THRESHOLD,
  alarmDescription: 'SSR function p95 latency exceeds 500ms',
});

// Track CloudFront cache hit rate
new cloudwatch.Alarm(stack, 'CacheHitRateAlarm', {
  metric: new cloudwatch.Metric({
    namespace: 'AWS/CloudFront',
    metricName: 'CacheHitRate',
    dimensionsMap: { DistributionId: cfDistribution.distributionId },
    statistic: 'Average',
  }),
  threshold: 80, // Alert if cache hit rate drops below 80%
  evaluationPeriods: 5,
  comparisonOperator: cloudwatch.ComparisonOperator
    .LESS_THAN_THRESHOLD,
});

// Key metrics to track:
// - CloudFront CacheHitRate (target: >85%)
// - Lambda Duration p50 and p95
// - Lambda ColdStartDuration
// - OriginLatency (time to fetch from Lambda)