"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "The traditional full-stack web architecture—a Monolithic Ruby or Express backend with a SQL database and a client-side Single Page Application (SPA)—is no longer sufficient for modern, AI-integrated software products." }), "\n", _jsx(_components.p, { children: "Today's applications demand real-time streaming, edge-rendered interfaces, vector similarity search, durable background workflow execution, and resilient state synchronization." }), "\n", _jsx(_components.p, { children: "In this article, we map out the modern full-stack architecture standard in 2026." }), "\n", _jsx(_components.h2, { children: "1. The Modern Full Stack Topology" }), "\n", _jsx(_components.p, { children: "Here is how modern production web platforms are designed:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "[ Client Browser / Mobile App ]\n |\n v (HTTPS / WebSockets)\n[ Edge CDN & Reverse Proxy (Vercel / Cloudflare) ]\n |\n +---> [ React Server Components (Next.js App Router) ]\n | |\n | +---> [ Streaming UI via Server-Sent Events ]\n | +---> [ Server Actions & Type-Safe Mutations ]\n |\n +---> [ Serverless PostgreSQL & pgvector (Neon / Supabase) ]\n |\n +---> [ Asynchronous Durable Workers (Inngest / BullMQ) ]\n |\n +---> [ AI Model Inference (OpenAI / Anthropic) ]\n +---> [ Batch Embeddings & Vector Indexing ]\n +---> [ Third-Party Webhook Sync (Stripe, GitHub) ]\n" }) }), "\n", _jsx(_components.h2, { children: "2. Streaming UI with React Server Components" }), "\n", _jsx(_components.p, { children: "Waiting 10 seconds for an AI model or heavy backend query to complete before rendering anything leads to poor user retention." }), "\n", _jsx(_components.p, { children: "With Next.js App Router and React Server Components, you can stream partial HTML chunks directly as data arrives:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { Suspense } from \"react\";\nimport { UserMetrics } from \"./user-metrics\";\nimport { AiInsightsStream } from \"./ai-insights-stream\";\nimport { SkeletonLoader } from \"@/components/ui/skeleton\";\n\nexport default function DashboardPage() {\n return (\n

\n Executive Overview\n

\n\n {/* Renders instantly from fast cached database query */}\n \n\n {/* Streams in progressively without blocking page load */}\n }>\n \n \n

\n );\n}\n" }) }), "\n", _jsx(_components.h2, { children: "3. Serverless Databases & Vector Search in One Place" }), "\n", _jsxs(_components.p, { children: ["In the past, adding vector search required spinning up a dedicated Pinecone or Milvus cluster. Today, modern PostgreSQL engines (like Neon, Supabase, or self-hosted Postgres with ", _jsx(_components.code, { children: "pgvector" }), ") handle relational and vector data within the same database engine."] }), "\n", _jsx(_components.h3, { children: "Why This Matters" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Atomic Transactions" }), ": You can insert a user record, create a document, and store its embedding in a single ACID transaction."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Joined Queries" }), ": You can filter vector similarity by foreign key constraints, tenant ID, and user permission roles in one SQL query:"] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sql", children: "SELECT\n documents.id,\n documents.title,\n documents.content,\n 1 - (documents.embedding <=> $1) AS similarity\nFROM documents\nWHERE documents.organization_id = $2\n AND documents.is_archived = false\nORDER BY similarity DESC\nLIMIT 5;\n" }) }), "\n", _jsx(_components.h2, { children: "4. Decoupling Compute with Durable Background Jobs" }), "\n", _jsx(_components.p, { children: "AI workloads (like transcribing audio, fine-tuning, generating long reports, or processing 50-page PDFs) should never run inside synchronous API route handlers." }), "\n", _jsxs(_components.p, { children: ["Using durable workflow execution tools like ", _jsx(_components.strong, { children: "Inngest" }), " or ", _jsx(_components.strong, { children: "Temporal" }), ", you decompose complex jobs into resilient, independently retried steps:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "export const processDocumentPipeline = inngest.createFunction(\n { id: \"process-document\" },\n { event: \"document/uploaded\" },\n async ({ event, step }) => {\n // 1. Extract text from PDF in cloud storage\n const rawText = await step.run(\"extract-text\", async () => {\n return await extractPdfText(event.data.fileUrl);\n });\n\n // 2. Chunk text into 500-token paragraphs\n const chunks = await step.run(\"chunk-text\", async () => {\n return splitIntoSemanticChunks(rawText);\n });\n\n // 3. Generate vector embeddings in parallel batches\n const embeddings = await step.run(\"generate-embeddings\", async () => {\n return await batchGenerateEmbeddings(chunks);\n });\n\n // 4. Save to PostgreSQL vector index\n await step.run(\"save-vectors\", async () => {\n return await db.insert(documentVectors).values(embeddings);\n });\n\n return { status: \"ready\" };\n }\n);\n" }) }), "\n", _jsx(_components.h2, { children: "5. Security and Rate Limiting at the Edge" }), "\n", _jsx(_components.p, { children: "With automated bots and AI scrapers browsing the web, edge rate limiting using Cloudflare Workers or Upstash Redis is mandatory:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Enforce IP and user session rate limits on AI endpoints." }), "\n", _jsx(_components.li, { children: "Validate JWT signatures at the edge before hitting origin databases." }), "\n", _jsx(_components.li, { children: "Protect webhooks with cryptographic HMAC signatures." }), "\n"] }), "\n", _jsx(_components.h2, { children: "Summary Checklist" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["[x] ", _jsx(_components.strong, { children: "Frontend" }), ": Next.js App Router, React Server Components, Streaming UI with Suspense."] }), "\n", _jsxs(_components.li, { children: ["[x] ", _jsx(_components.strong, { children: "Backend Logic" }), ": Type-safe Server Actions and Zod-validated API routes."] }), "\n", _jsxs(_components.li, { children: ["[x] ", _jsx(_components.strong, { children: "Database" }), ": PostgreSQL with ", _jsx(_components.code, { children: "pgvector" }), " for unified relational and embedding storage."] }), "\n", _jsxs(_components.li, { children: ["[x] ", _jsx(_components.strong, { children: "Background Jobs" }), ": Durable step-function worker queues for long-running AI pipelines."] }), "\n", _jsxs(_components.li, { children: ["[x] ", _jsx(_components.strong, { children: "Observability" }), ": PostHog and OpenTelemetry for end-to-end tracing."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Mastering this modern architecture gives you the foundation to build scalable, resilient, world-class applications." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Modern Full Stack Architecture in the AI Era