--- id: wiki-2026-0508-modern-website-architecture title: Modern Website Architecture category: 10_Wiki/Topics status: verified canonical_id: self aliases: [Web Architecture 2026, RSC Architecture, Islands Architecture] duplicate_of: none source_trust_level: A confidence_score: 0.9 verification_status: applied tags: [web, architecture, rsc, astro, nextjs, edge] raw_sources: [] last_reinforced: 2026-05-10 github_commit: pending tech_stack: language: typescript framework: nextjs-astro --- # Modern Website Architecture ## 매 한 줄 > **"매 page = static shell + streamed server components + minimal islands"**. 2020 SPA → 2024 SSR → 2026 RSC + edge 의 진화. Next.js 16 / Astro 5 / Remix 의 매 default = server-first, JS 의 ship 매 minimum. ## 매 핵심 ### 매 layer - **Edge runtime**: 매 request 의 region-local. Vercel/Cloudflare Workers, sub-50ms. - **Server components**: 매 default render = server. Zero JS 의 ship. - **Client islands**: 매 interactivity 의 hydrate 만. - **CDN**: 매 static asset + ISR cache. ### 매 trade-off - **SSG**: 매 build-time, fastest, stale data. - **SSR**: 매 request-time, fresh, slower TTFB. - **ISR**: 매 hybrid — stale-while-revalidate. - **CSR**: 매 SPA, JS-heavy, slow first paint. ### 매 응용 1. Marketing site: SSG + Astro islands. 2. Dashboard: RSC + streaming + Suspense. 3. E-commerce: ISR + edge personalization. ## 💻 패턴 ### Next.js 16 RSC ```tsx // app/products/[id]/page.tsx — server component (default) import { db } from "@/lib/db"; import { AddToCart } from "./add-to-cart"; // client island export default async function Page({ params }: { params: { id: string } }) { const product = await db.product.findUnique({ where: { id: params.id } }); if (!product) return ; return (

{product.name}

{product.description}

); } ``` ### Client island ```tsx // app/products/[id]/add-to-cart.tsx "use client"; import { useState } from "react"; export function AddToCart({ productId }: { productId: string }) { const [pending, setPending] = useState(false); return ( ); } ``` ### Streaming with Suspense ```tsx import { Suspense } from "react"; export default function Page() { return ( <>
}> {/* awaits DB */} }> ); } ``` ### Astro islands ```astro --- // src/pages/index.astro import Counter from "../components/Counter.svelte"; const products = await fetch("https://api.shop/products").then(r => r.json()); --- {products.map(p =>
{p.name}
)} ``` ### Edge middleware (Vercel) ```typescript // middleware.ts import { NextResponse } from "next/server"; import { geolocation } from "@vercel/functions"; export function middleware(req: Request) { const { country } = geolocation(req); const res = NextResponse.next(); res.cookies.set("country", country ?? "US"); return res; } export const config = { matcher: "/((?!_next).*)" }; ``` ### ISR + tag revalidation ```tsx // fetch with cache tags const data = await fetch("https://api.shop/products", { next: { revalidate: 3600, tags: ["products"] }, }); // trigger revalidation on update import { revalidateTag } from "next/cache"; revalidateTag("products"); ``` ### Server actions ```tsx // app/contact/page.tsx export default function Page() { async function submit(form: FormData) { "use server"; await db.message.create({ data: { body: form.get("body") as string } }); } return (