--- title: Web applications description: Choose a framework and rendering approach, connect data and sign-in, cache responses, and operate your web app in production. url: "https://vercel.com/kb/architecture/web" last_updated: 2026-11-02 install_vercel_plugin: npx plugins add vercel/vercel-plugin --- # Web applications Choose a framework and rendering approach, connect data and sign-in, cache responses, and operate your web app in production. ## Build the application Choose a framework, structure the project, and decide how each route renders. ### Choose a framework and app structure Pick a starting point and decide how your frontend and API map onto Vercel projects. - [Choosing how to structure your application on Vercel](/kb/guide/structure-your-application): Compare three ways to structure an application on Vercel (a single framework, one project with Services, or separate projects in a monorepo) and learn how to choose based on domains, deploy coupling, and languages. - [Build with Next.js](https://vercel.com/academy/nextjs-foundations): Build two ACME apps on Next.js 16.4, from routing and Server Components to data fetching, caching, forms, and deployment. - [Nuxt on Vercel](https://vercel.com/academy/nuxt-on-vercel): Build a hot springs finder app using idiomatic Nuxt patterns, from reactivity to auth to deployment. - [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate): Deploy a minimal create-next-app project with TypeScript and next/font in one click. ### Decide what to prerender, cache, and stream Split each route into a static shell, cached shared data, and request-time content. - [Cache Components for Instant and Fresh Pages](https://vercel.com/academy/nextjs-foundations/cache-components): Build a product page with \`"use cache"\`, \`cacheLife\` profiles, \`cacheTag\`, and a Server Action that calls \`updateTag\`. - [How Speechify serves 500,000 dynamic pages to 60 million users](https://vercel.com/customers/how-speechify-serves-50000-dynamic-pages-to-60-million-users-on-vercel): See how Speechify combines Cache Components, ISR, and the data cache to keep database load flat as traffic grows. - [Suspense and Streaming](https://vercel.com/academy/nextjs-foundations/suspense-and-streaming): Split a page into independent Suspense boundaries so the shell arrives first and slow sections stream in behind it. - [Chatbot with Next.js](https://chatbot.ai-sdk.dev/): Open-source template with built-in authentication, streaming responses, and generative UI. ## Connect data and services Give the app persistent storage, file uploads, and user accounts. ### Store and query application data Choose where data and files live and how server code reads them efficiently. - [Vercel Storage overview](https://vercel.com/docs/storage): Compare Blob, Global Config, and Marketplace databases by latency, use case, and limits. - [Build with Vercel Blob on Next.js](/kb/guide/vercel-blob-nextjs): Deploy the Vercel Blob Next.js Starter and learn how client uploads store images securely in a private Blob store. - [Build Imgur-style image hosting with Nuxt and Vercel Blob](/kb/guide/vercel-blob-nuxt-imgur-clone): Learn how to build an Imgur-style paste-to-share image host using Nuxt and Vercel Blob, with direct-to-storage client uploads, shareable ISR preview pages, and CDN caching at every layer. - [Vercel with Neon Postgres](https://vercel.com/templates/next.js/vercel-with-neon-postgres): Deploy a full-stack Next.js app with Neon Postgres and Drizzle ORM, plus working Better Auth sign-in. ### Add sign-in and access control Choose how users sign in: Better Auth for public apps, or Passport for internal tools. - [Identify users and control access in Next.js with Vercel Passport](/kb/guide/vercel-passport-nextjs): Use \`getIdentity()\` to read a visitor’s verified Vercel Passport identity in Next.js, then personalize pages, restrict routes by group, and log actions. - [Better Auth: Next.js integration](https://better-auth.com/docs/integrations/next): Add sign-in to a public Next.js app with Better Auth, the open-source auth library Vercel now maintains. - [Security Review: APIs and Config](https://vercel.com/academy/nextjs-foundations/security-review-apis-and-config): Harden an insecure API route with Zod validation, authorization checks, rate limiting, and safe environment variables. - [Use Vercel Passport with Node.js and Python backends](/kb/guide/vercel-passport-backend-frameworks): Secure internal apps and verify a visitor's identity with Vercel Passport in your backend, with examples for Express, Hono, Nitro, and FastAPI. ## Serve it efficiently Run server work on the right compute and cache data and responses at the right layer. ### Run server code on Fluid compute Learn how functions run and scale. Database connection handling is covered in the Backends stack. - [How Fluid compute works on Vercel](https://vercel.com/blog/how-fluid-compute-works-on-vercel): Follow a request to concurrent, pre-warmed instances, and learn why this lowers cold starts and cost. - [How OpenEvidence scales medical search for 650K doctors](https://vercel.com/customers/how-openevidence-scales-medical-search-for-doctors): Learn how OpenEvidence reduced their serverless spend by 90% while maintaining the same performance. - [Fluid Compute](https://vercel.com/academy/optimize-your-vercel-account/fluid-compute): Turn on Fluid compute, redeploy, and confirm in Observability that Active CPU time drops well below wall time. ### Cache data and responses Decide which layer caches what (CDN responses, ISR pages, or runtime data) and how each is invalidated. - [Caching audits: Five antipatterns that cost you performance and money](/kb/guide/caching-antipatterns): Five caching antipatterns from hundreds of Vercel technical audits: write amplification, deploy-wiped caches, spinner shells, and how to diagnose each. - [Control CDN caching for shared and personalized pages on Vercel](/kb/guide/cdn-cache-personalized-pages): Control CDN caching for shared and personalized Next.js pages. Set cache headers, separate per-user content, and verify responses on Vercel. - [Simplifying runtime caching on Vercel](https://vercel.com/blog/simplifying-runtime-caching-on-vercel): Learn how the Data Cache merges into Runtime Cache and how regional tag invalidation differs from caching responses on the CDN. - [Runtime Cache](https://vercel.com/academy/optimize-your-vercel-account/runtime-cache): Cache a slow lookup with \`'use cache: remote'\`, \`cacheTag\`, and \`cacheLife\`, then verify repeat requests return in under 200ms. ## Operate in production Watch real behavior, keep abusive traffic out, and ship and roll back releases safely. ### Monitor performance and real-user experience Find slow routes and errors, and measure what real visitors experience. - [Core Web Vitals + Measurement](https://vercel.com/academy/nextjs-foundations/core-web-vitals-and-measurement): Add Speed Insights to a Next.js layout and use real-user data to guide performance work. - [Ship less JavaScript in Next.js with your AI agent](https://nextjs.org/blog/ship-less-javascript-with-ai): Give your AI agent the tools to investigate code relationships and optimize your bundles. - [Observability](https://vercel.com/academy/vercel-foundations/platform-observability): Drill into CDN requests, functions, and external APIs, build Query investigations, and set up error anomaly alerts. - [How to improve Core Web Vitals](/kb/guide/how-to-improve-core-web-vitals): Improve Core Web Vitals (INP, LCP, CLS) with metric-specific fixes, field-data measurement, and Next.js/Vercel performance best practices. ### Protect traffic from bots and abuse Decide which automated traffic to allow, challenge, or block. - [How Nous Research used BotID to block automated abuse at scale](https://vercel.com/customers/how-nous-research-used-botid-to-block-automated-abuse-at-scale): See how Nous Research added BotID checks to sign-up and chat, then blocked a coordinated bot attack that spiked traffic by 3,000%. - [The three types of AI bot traffic and how to handle them](https://vercel.com/blog/the-three-types-of-ai-bot-traffic-and-how-to-handle-them): Learn how AI training crawlers, grounding bots, and AI referrals feed each other, and why blocking every AI crawler can cost you citations. - [How to use Vercel’s Bot Management features](/kb/guide/how-to-utilize-vercels-bot-management-features): A practical, step-by-step guide to identifying unwanted automated traffic and securing your Vercel apps with Bot Protection Managed Rules, AI Bots Managed Rules, BotID, and custom WAF rules. Learn how to enable, monitor, and tune protections to block bad bots, preserve performance for real users, and safely allow good crawlers. - [Firewall Rules](https://vercel.com/academy/optimize-your-vercel-account/firewall-rules): Publish a custom rule that rate-limits POSTs to an API route per IP, then test the 429 responses. ### Roll out releases and recover Release to a slice of traffic first, keep old clients working, and undo a bad deploy in seconds. - [Vercel Flags: Platform-native feature flags](https://vercel.com/blog/vercel-flags-platform-native-feature-flags): Separate releasing from deploying: target segments, roll out progressively, and flip a kill switch without touching code or redeploying. - [How to gradually roll out new versions of your backend](/kb/guide/how-to-gradually-roll-out-new-versions-of-your-backend): Incrementally release updates to your backend to minimize impact of mistakes. - [Deployments](https://vercel.com/academy/vercel-foundations/deployments): Use Instant Rollback to restore a previous deployment in about a second, promote the fix, and configure Skew Protection. ## Reference Architecture Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build. - [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows. - [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches. - [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work. [Browse all stacks](/kb/architecture)