Deploying React Apps

# 1. Static (SPA, Vite)
# Cheapest. Works for any React Router / TanStack Router app without SSR.

# Cloudflare Pages
# - Connect Git, set 'npm run build' and 'dist' as output
# - Free generous tier; instant rollback; cache-API at the edge

# Netlify
# - Same model; redirects + headers configured via netlify.toml

# AWS S3 + CloudFront + ACM
aws s3 sync ./dist s3://my-site --delete \
  --cache-control 'public, max-age=31536000, immutable' \
  --exclude 'index.html'
aws s3 cp ./dist/index.html s3://my-site/index.html \
  --cache-control 'public, max-age=60'
aws cloudfront create-invalidation --distribution-id XXX --paths '/*'


# 2. SSR with Next.js
# Vercel: vercel deploy (matches the framework one-to-one)
# Self-host:
#   next.config.js -> output: 'standalone'
#   Dockerfile builds a small image with .next/standalone
# Cloudflare Pages with @cloudflare/next-on-pages adapter (limited APIs)
# AWS Amplify Hosting (supports SSR Next)


# 3. SSR with Remix
# Targets: Node, Cloudflare Workers, Deno Deploy, Fastly, AWS Lambda
# Choose adapter per target; same app code.


# 4. Static + edge function hybrid
# Astro, Next App Router, Remix - all support 'partial pre-rendering' style.
# Pre-render landing pages; SSR product detail pages; client-render dashboard.


# 5. Production checklist
# - HTML cache short (60s), assets long (1y, immutable) - hashed filenames
# - Brotli + gzip at the edge
# - Pre-load hero image and critical fonts
# - HTTP/3 and HTTP/2 server push only where it helps
# - CSP headers tuned for your sources
# - X-Frame-Options DENY, Referrer-Policy strict-origin-when-cross-origin
# - HSTS once you are sure about HTTPS
# - Add a /healthz and a synthetic monitor


# 6. Observability
# - Web Vitals reporting (next/web-vitals, web-vitals package)
# - Sentry or Datadog for errors + traces
# - Synthetic checks (Checkly, Datadog Synthetics, k6 cloud)


# 7. Multi-region
# Pages and CDNs are anycast; SSR runtimes can run in multiple regions
# But your DB is probably in one - measure round trips before assuming gain

# Static build
npm run build
# Then deploy /dist to Vercel, Netlify, Cloudflare Pages, Render, …