Chaos and Order

💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

들어가며 — 2026년 5월, 프론트엔드는 "프레임워크가 아니라 렌더링 모델"로 갈라진다

3년 전까지만 해도 프론트엔드를 고른다는 건 React냐 Vue냐 Svelte냐를 고르는 것이었다. 2026년 5월 현재 그 질문은 거의 의미가 없다. **진짜 선택은 "어떤 렌더링 모델을 쓸 것인가"**이고, 그 위에 어떤 라이브러리/메타 프레임워크를 얹을지가 따라온다.

대략 다섯 가지 모델로 정리된다.

1. **Virtual DOM + reconciliation (React 19, Preact, Inferno)**

2. **Signals 기반 fine-grained reactivity (SolidJS 2, Svelte 5 runes, Vue 3.6 Vapor, Angular 19 signals, Preact signals)**

3. **Resumability (Qwik 2)** — hydration 자체를 없애는 길

4. **Islands architecture (Astro 5, Fresh, Eleventy with islands)**

5. **HTML-over-the-wire (HTMX 2, Hotwire/Turbo, LiveView 류)**

이 다섯 모델 위에서 **React Compiler GA**, **Vue Vapor 정식 릴리스**, **Svelte runes 안정화**, **Next.js 16 PPR 정식**, **Remix가 React Router 7로 흡수**, **TanStack Start 베타 안착** 같은 큰 사건이 2025~2026년 사이에 줄지어 일어났다. 이 글은 그 변화의 윤곽과 실제 코드 형태를 한 페이지에 모은다.

React 19/19.1 — Compiler GA, Actions, Server Components가 기본값으로

React 19.0은 2024년 말 GA 됐고, 2025년에 19.1이 마이너로 따라왔으며, 2026년 들어 19.1.x 패치 라인이 안정화됐다. 핵심 변화 세 가지를 정직하게 본다.

- **React Compiler GA**: 2025년에 `react-compiler` 패키지가 stable 됐다. `useMemo`, `useCallback`, `React.memo` 같은 수동 메모이제이션을 사실상 사용 안 해도 되는 시대가 됐다. Babel/SWC 플러그인 형태로 빌드 타임에 자동 메모화한다.

- **Actions + `useActionState` + `useFormStatus`**: form 제출과 비동기 mutation을 React 모델 안으로 흡수. `<form action={...}>`가 1급 시민이다.

- **Server Components + `use` 훅**: RSC가 Next.js만의 것이 아니라 React 코어의 일부로 확립됐다. Promise를 직접 `use(promise)`로 풀 수 있다.

React 19 Actions의 전형은 다음과 같다.

'use client'

async function subscribe(prev: { ok: boolean } | null, formData: FormData) {

const email = formData.get('email')

const res = await fetch('/api/subscribe', { method: 'POST', body: JSON.stringify({ email }) })

return { ok: res.ok }

}

export function Subscribe() {

const [state, formAction, pending] = useActionState(subscribe, null)

return (

{state?.ok && <p>구독 완료</p>}

)

}

`useActionState`는 19에서 도입됐고, `useFormStatus`는 자식 컴포넌트에서 부모 form의 pending 상태를 읽을 때 쓴다. 둘 다 React 18의 `useFormState` 후속이다.

Vue 3.6 — Vapor Mode 정식 릴리스, VDOM이 옵션이 된 해

Vue.js는 2026년 초 **3.6에서 Vapor Mode를 정식 stable로 표시**했다. Vapor는 VDOM을 거치지 않고 SolidJS 스타일의 컴파일된 fine-grained reactivity로 직접 DOM을 업데이트하는 렌더 백엔드다. 같은 SFC(`.vue`)를 그대로 쓰면서 컴파일러가 두 결과물(VDOM/Vapor)을 낸다.

- 의존성이 크게 줄고, 메모리 사용량이 30~50% 감소, 초기 렌더 비용은 SolidJS와 비교 가능한 수준이라는 게 공식 벤치 결과다.

- 단점은 일부 라이브러리(주로 VDOM 기반 third-party)가 Vapor 모드에서 동작 보장이 안 된다는 점. Vue Router, Pinia, VueUse 같은 1군은 호환된다.

Vue 3.6 Vapor 사용 예.

const count = ref(0)

const double = computed(() => count.value * 2)

`<script setup vapor>` 한 줄로 컴파일 타깃이 바뀐다. 같은 컴포넌트 트리에서 Vapor와 VDOM을 섞을 수 있으므로 점진적 마이그레이션이 가능하다.

Svelte 5 + SvelteKit 3 — runes API, 4년의 논쟁이 끝났다

Svelte 5는 2024년 말 GA 됐고, 2025년을 거치며 SvelteKit이 메이저 3으로 따라왔다. 핵심은 **runes API**다.

- `$state`, `$derived`, `$effect`, `$props`, `$bindable` 같은 함수형 reactivity primitive.

- 이전 Svelte 3/4의 "최상위 `let` 변수는 자동으로 반응형" 마법은 옵션이 됐고, runes는 모듈 어디서나(컴포넌트 밖에서도) 쓸 수 있다.

Svelte 5 runes의 실제 코드.

let count = $state(0)

let double = $derived(count * 2)

$effect(() => {

console.log('count changed:', count)

})

SvelteKit 3는 server actions(`+page.server.ts`의 `actions`), 향상된 streaming, Vite 6 기반 빌드, 그리고 `remote functions`(서버 함수를 클라이언트에서 직접 호출하는 RPC 형태)를 정식 지원한다.

SolidJS 2 + SolidStart — signals의 원조가 메이저 2를 찍다

SolidJS는 2026년 1분기에 **메이저 2.0**을 공개했다. signals를 처음부터 1급 시민으로 설계한 라이브러리답게 변화는 점진적이지만 강하다.

- `createSignal`, `createMemo`, `createEffect`는 그대로다.

- 새로 들어온 `createAsync`, `useAction`, `query`는 SolidStart의 RPC 모델과 묶여서 동작한다.

- JSX 컴파일이 더 작은 코드 사이즈를 내고, SSR 스트리밍이 안정화됐다.

SolidStart 1.0이 2025년 가을 GA 됐고, Vinxi(런타임)와 Nitro(서버) 기반이다. 라우팅은 file-based, 서버 함수는 `'use server'` 디렉티브로 표현한다.

function Counter() {

const [count, setCount] = createSignal(0)

createEffect(() => {

console.log('count:', count())

})

return <button onClick={() => setCount(count() + 1)}>{count()}</button>

}

Solid는 작고, 빠르고, 멘탈 모델이 "JS 그대로"라서 한 번 익히면 가장 직관적이다는 평이 그대로 유지된다.

Qwik 2 — resumability라는 다른 길

Qwik은 hydration을 피하는 길을 끝까지 간다. 2026년 5월 기준 Qwik 2가 안정화 단계에 있고, QwikCity가 메타 프레임워크 역할을 한다.

- **Resumability**: 서버에서 렌더링한 HTML을 그대로 가져오고, 사용자가 상호작용한 컴포넌트만 그 시점에 코드가 다운로드된다. hydration이 "처음부터 다시 실행"하는 비용을 없앤다.

- `component$`, `$()`, `useSignal`, `useTask$`, `useStore` 같은 함수가 핵심 API다.

- `$` 접미사는 빌드 타임에 코드를 청크로 분리하는 신호다.

Qwik 코드 예.

export default component$(() => {

const count = useSignal(0)

const onClick = $(() => count.value++)

return <button onClick$={onClick}>{count.value}</button>

})

Qwik은 점유율은 작지만 "대형 이커머스 + SEO + 첫 페인트 속도"에서 강하다는 포지션이 굳어졌다. Builder.io가 메인 스폰서다.

Astro 5 — server islands와 content layer로 콘텐츠 사이트의 표준이 되다

Astro는 2024년 말 5.0을 냈고, 2025년을 거쳐 콘텐츠 중심 사이트(블로그, 마케팅, 문서, 뉴스 사이트, 작은 이커머스)에서 사실상 표준이 됐다. 2026년 5월 시점의 핵심 기능.

- **Server islands**: 일부 영역만 동적으로 서버에서 렌더링하고 나머지는 정적인 형태. PPR(Partial Prerendering)의 Astro 버전이다.

- **Content Layer API**: 정적 콘텐츠뿐 아니라 외부 CMS/DB/API에서 가져온 데이터까지 통일된 content loader로 다룬다.

- **View Transitions API** 통합, framework-agnostic island(`<MyReactComponent client:visible />` 식)는 그대로.

Astro의 컴포넌트 예.

const posts = await Astro.glob('./posts/*.md')

Astro의 강점은 "기본은 0KB JS, 필요한 부분만 island로 가져온다"는 점이다.

HTMX 2 — JS를 최소화하는 길, 여전히 살아 있다

HTMX는 2024년에 메이저 2.0을 냈고, 2026년 현재 안정 라인업이다. 서버에서 HTML 조각을 받아서 페이지의 일부를 갱신하는 모델로, "백엔드가 강한 팀이 SPA의 80% 효과를 20%의 복잡도로 얻는다"는 포지션이다.

- 별도의 빌드 도구가 필요 없다. CDN 한 줄로 들어간다.

- Django, Rails, Phoenix, Laravel, FastAPI 같은 서버 사이드 프레임워크와 자연스럽게 붙는다.

HTMX의 전형은 다음과 같다.

지금 시간 가져오기

GitHub의 일부 UI, 헬프스카웃, 디스코드의 일부 어드민, 그리고 Django/Rails 진영의 사이드 프로젝트에서 HTMX의 채택률이 꾸준히 올라가고 있다.

Next.js 16 — Partial Prerendering, after API, dynamicIO

Next.js는 2025년 가을 15에서 16으로 메이저를 올렸다. 2026년 5월 기준 16.1.x가 안정 릴리스다.

- **Partial Prerendering (PPR)**: 정적 셸을 즉시 보내고, 동적 부분(Suspense 경계)은 스트리밍으로 채운다. 정식 stable이 됐다.

- **`after()` API**: 응답을 보낸 뒤 백그라운드에서 실행하는 사이드 이펙트(로깅, 분석, 이메일 큐). serverless에서 fire-and-forget을 안전하게 다룬다.

- **dynamicIO**: 동적/정적 경계를 자동 추론. `cookies()`, `headers()`, `searchParams`를 쓰는 위치에 따라 경계가 자동으로 그어진다.

- **Turbopack**이 dev/build 양쪽에서 기본 번들러로 들어왔다.

Next.js 16의 코드 예.

// app/posts/[id]/page.tsx

export default async function Page({ params }: { params: Promise<{ id: string }> }) {

const { id } = await params

return (

)

}

Next.js는 여전히 React 생태계의 디폴트 메타 프레임워크다. Vercel이 메인 스폰서이고 RSC와 PPR을 가장 적극적으로 끌고 간다.

Remix → React Router 7 — 합쳐졌다

Remix는 2024~2025년에 걸쳐 React Router 7로 흡수 통합됐다. 2026년 5월 기준 사실상 두 이름이 하나의 라이브러리를 가리킨다.

- React Router 7은 SPA 모드와 "framework 모드"(=옛 Remix) 두 가지로 동작한다.

- loader/action 모델, nested route, error boundary, form action이 그대로 살아 있다.

- Shopify가 후원하고, 그래서 이커머스 + Hydrogen이 한 묶음으로 강조된다.

기존 Remix 코드는 거의 그대로 React Router 7에서 동작한다. import 경로가 `@remix-run/*`에서 `react-router`로 바뀐 정도다.

TanStack Start — Tanner Linsley의 메타 프레임워크 카드

TanStack(Tanner Linsley 진영)은 React Query, Router, Table, Form, Virtual로 이미 React 생태계의 중요한 한 축이다. 2025년 베타에 들어간 **TanStack Start**가 2026년에 정식 1.0을 향해 가고 있다.

- 풀스택 React 프레임워크. 파일 기반 라우팅 + type-safe loader + server function.

- Vite 6 + Vinxi(또는 자체 서버 어댑터) 기반.

- "Next.js만큼 정해진 컨벤션은 싫지만, React Router 7보다 더 풀스택"인 자리를 노린다.

라우터 정의 예.

export const Route = createFileRoute('/posts/$postId')({

loader: async ({ params }) => {

return await fetch(`/api/posts/${params.postId}`).then((r) => r.json())

component: PostPage,

})

function PostPage() {

const post = Route.useLoaderData()

return <h1>{post.title}</h1>

}

Nuxt 4 + Nitro 3 — Vue 진영의 풀스택 답안

Vue 진영의 메타 프레임워크 Nuxt는 2025년에 메이저 4를 냈고, 2026년 4.x 라인이 안정화됐다.

- **Nitro 3** 기반 universal 서버 — Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify Edge 어디서나 같은 코드로 돈다.

- Vue 3.6의 Vapor 모드와 자연스럽게 연결.

- 라우팅, layouts, server routes(`server/api/`), `useFetch`/`useAsyncData` 컴포저블이 1급.

- `nuxt/content`, `nuxt/image`, `nuxt/ui` 모듈 생태계가 두텁다.

Angular 19 — signals + control flow + deferrable views로 다시 부상

오랫동안 "엔터프라이즈에 갇혀 있다"는 평이었던 Angular는 17~19를 거치며 빠르게 바뀌었다.

- **Signals**(`signal`, `computed`, `effect`)가 standalone API로 안정화.

- **새 control flow**: `@if`, `@for`, `@switch` 템플릿 문법이 `*ngIf` 류를 대체.

- **Deferrable views**(`@defer`): 뷰포트에 들어올 때 lazy load되는 부분.

- **Standalone components**가 기본값. 모듈 시스템은 옵트인.

- SSR/hydration이 정식 stable, partial hydration도 19에서 들어왔다.

Angular는 한국/일본의 대형 SI, 금융, 헬스케어 시장에서 강한 위치를 유지한다.

Lit, Marko, Mitosis — 작지만 의미 있는 카드들

- **Lit 4**: Google이 미는 web components 라이브러리. 디자인 시스템과 마이크로 프론트엔드에 강하다. ING, Adobe Spectrum, SAP UI5, GitHub의 일부 UI가 web components 기반이다.

- **Marko**: eBay가 만든 SSR 우선 프레임워크. Marko 6은 fine-grained reactivity + 자동 코드 분할. 점유율은 작지만 eBay 내부에서는 메인이다.

- **Mitosis**: Builder.io가 만든 "한 번 작성하고 여러 프레임워크로 컴파일"하는 메타-도구. JSX 비슷한 문법으로 작성하면 React, Vue, Svelte, Solid, Qwik, Angular용 컴포넌트를 생성한다. 디자인 시스템/컴포넌트 라이브러리 벤더에게 유용하다.

렌더링 모델 비교 — SSG vs SSR vs ISR vs PPR vs Streaming

| 모델 | 설명 | 대표 사용처 | 비고 |

| --- | --- | --- | --- |

PPR은 2026년의 "디폴트 메탈 모델 답"이 됐다. 캐시 가능한 부분은 캐시하고, 사용자별/실시간 부분만 동적으로 두는 명시적 경계 모델이다.

빌드 도구 — Vite 6, Turbopack, Rspack, esbuild, swc, Bun, Deno 2, oxc

번들러/빌드 도구 시장도 2026년에 거의 정리됐다.

- **Vite 6**: Rollup → Rolldown(Oxc 기반 Rust 번들러) 전환이 진행 중. dev는 esbuild + native ESM, build는 Rolldown으로 통일이 목표. 사실상 SvelteKit/Nuxt/SolidStart/Astro/TanStack Start의 공통 기반.

- **Turbopack**: Vercel이 만드는 Next.js용 Rust 번들러. Next.js 16에서 dev/build 양쪽 기본값.

- **Rsbuild + Rspack**: ByteDance가 만든 Rust 기반 webpack 호환 번들러. webpack 마이그레이션이 가장 쉽다는 강점.

- **esbuild**: Go로 작성된 트랜스파일러/번들러. 다른 도구의 내부 엔진으로 광범위하게 쓰인다.

- **swc**: Rust로 작성된 Babel 대체. Next.js 내부 컴파일러.

- **Bun**: 자바스크립트 런타임 + 패키지 매니저 + 번들러를 한 묶음으로. 1.x 라인이 안정화됐고 Node 호환성도 거의 다 따라왔다.

- **Deno 2**: 2024년 말 메이저 2, npm 호환성과 워크스페이스가 정식. JSR(Deno의 npm 대안 레지스트리)이 살아남았다.

- **oxc**: Rust로 작성된 JavaScript 툴체인(파서, 린터 `oxlint`, transformer). Rolldown의 코어이기도 하다.

빌드 도구의 큰 그림은 "Rust + native가 모든 레이어를 잠식한다"는 것이다.

상태 관리 — Redux Toolkit, Zustand, Jotai, TanStack Query, SWR, Valtio, MobX, Effector

전역 상태 관리의 모양도 2026년에 정리됐다.

- **서버 상태**는 **TanStack Query**(React Query)와 **SWR**이 양분. 거의 디폴트.

- **클라이언트 상태(작은)**: `useState` + Context로 충분한 경우가 늘었다.

- **클라이언트 상태(중간)**: **Zustand**가 사실상의 디폴트. 작고 보일러플레이트가 없다.

- **클라이언트 상태(atom 기반)**: **Jotai**가 강력. Recoil은 사실상 유지보수 모드.

- **클라이언트 상태(프록시 기반)**: **Valtio**, **MobX**.

- **클라이언트 상태(엔터프라이즈)**: **Redux Toolkit**이 여전히 큰 코드베이스의 표준. RTK Query까지 묶으면 서버 상태도 커버.

- **이벤트 기반**: **Effector**가 러시아권/유럽에서 두꺼운 팬층.

Zustand의 전형.

interface Counter {

count: number

inc: () => void

}

export const useCounter = create<Counter>((set) => ({

count: 0,

inc: () => set((s) => ({ count: s.count + 1 })),

}))

스타일링 — Tailwind 4 Oxide, CSS-in-JS의 후퇴, shadcn/ui의 확산

CSS 진영의 2026년 풍경.

- **Tailwind CSS 4**: 2025년 1월 GA. Oxide(Rust) 엔진으로 빌드가 10~100배 빨라졌고, 네이티브 CSS variables, container queries, cascade layers를 1급 시민으로 다룬다. 설정 파일이 거의 사라지고 CSS-first config로 바뀌었다.

- **CSS-in-JS의 후퇴**: `styled-components`는 2024년에 사실상 maintenance 모드 선언. `Emotion`은 살아 있지만 신규 채택은 줄었다. RSC와 잘 안 맞는 게 큰 이유.

- **CSS Modules**: 여전히 가장 안전한 선택. Vite/Next/Nuxt 모두 1급.

- **Panda CSS**: ChakraUI 팀이 만든 zero-runtime CSS-in-JS. Tailwind 대안.

- **vanilla-extract**: TypeScript에서 CSS를 작성. Seek가 만들었다.

- **UnoCSS**: atomic CSS 엔진. Tailwind와 호환되면서 더 가볍다.

- **Mantine, Park UI, shadcn/ui**: 컴포넌트 라이브러리 진영. **shadcn/ui**는 "복붙해서 가져가는" 모델로 2024~2026년 React 진영에서 폭발적 점유율. Park UI는 같은 사상의 Vue/Solid/Svelte 버전.

shadcn/ui CLI 사용.

npx shadcn@latest init

npx shadcn@latest add button card dialog

테스팅 — Playwright, Vitest 3, Storybook 9, Chromatic, Cypress

- **Playwright**: E2E의 사실상 디폴트. Microsoft 후원, Chromium/Firefox/WebKit 모두 지원, trace viewer가 강력.

- **Vitest 3**: 2025년 메이저. Jest와 거의 호환되면서 Vite 친화적이고 훨씬 빠르다.

- **Storybook 9**: 2026년 초 GA. 더 가벼워졌고 Vite 기반 구성이 기본.

- **Chromatic**: Storybook과 짝지어진 시각 회귀 테스트 SaaS.

- **Cypress**: 여전히 큰 점유율이지만 신규 채택은 Playwright로 이동.

- **Jest**: 살아 있지만 신규 프로젝트는 Vitest로 가는 흐름.

Vercel AI SDK, T3 Stack, Refine 등 사이드 카드

- **Vercel AI SDK**: React/Vue/Svelte/Solid에서 LLM 통합을 위한 표준 라이브러리로 자리잡았다. `useChat`, `useCompletion`, `streamText` 같은 API.

- **T3 Stack** (`create-t3-app`): Next.js + tRPC + Prisma + Tailwind + NextAuth 묶음. 풀스택 스타터로 여전히 인기.

- **Refine**: 어드민/대시보드 전용 React 프레임워크. ant design/Material/Mantine과 잘 붙는다.

- **Hydrogen**: Shopify의 React Router 7 기반 이커머스 프레임워크.

한국 프론트엔드 생태계 — 토스, 당근, 와디즈, 쿠팡

- **토스(Toss)**는 React + Next.js + 자체 디자인 시스템 + 자체 모노레포 툴체인. `slash`(오픈소스 React 유틸 라이브러리)와 `toss/use-funnel`, `toss/suspensive` 같은 OSS를 활발히 푼다.

- **당근(Karrot)**은 React + Next.js + TanStack Query + 자체 디자인 시스템 `seed-design`. 마이크로 프론트엔드 일부 도입.

- **와디즈(Wadiz)**는 Next.js + TypeScript + Tailwind 스택을 정리해서 공개한 기술 블로그 글이 많다.

- **쿠팡(Coupang)**은 부분적으로 React Native(앱) + React/Next.js(웹) + 자체 디자인 시스템. 결제/주문 같은 핵심은 안정성 우선으로 보수적.

- **카카오, 라인, 우아한형제들**도 React + Next.js가 디폴트이고, 일부 신규 서비스는 SolidJS/Svelte 채택을 실험.

한국 컨퍼런스(FEConf, JSConf Korea)에서도 2025~2026년에는 RSC, signals, runes, PPR 같은 주제가 대세였다.

일본 프론트엔드 생태계 — CyberAgent, ZOZO, freee, 머니포워드, SmartHR

- **CyberAgent**는 ABEMA(영상 스트리밍), AmebaBlog, Tapple 등에서 React + Next.js를 메인으로 쓴다. Web Speed Hackathon 같은 프론트엔드 컨퍼런스를 주최한다.

- **ZOZO**(ZOZOTOWN)는 Next.js + TypeScript + 자체 디자인 시스템. 마이크로 프론트엔드 단계적 도입.

- **freee**(회계 SaaS)는 React + TypeScript + 자체 디자인 시스템 `vibes`. 접근성에 강하다.

- **머니포워드(Money Forward)**는 Rails + React 하이브리드에서 Next.js로 점진 이전 중.

- **SmartHR**은 React + 자체 디자인 시스템 `smarthr-ui`(OSS). 접근성과 디자인 시스템 운영에서 일본 내 모범 사례로 자주 언급된다.

일본 진영은 한국보다 Vue/Nuxt 비중이 약간 높다. Nuxt를 만드는 NuxtLabs의 핵심 멤버 중 일본 베이스가 있고, Vue Fes Japan 같은 컨퍼런스가 활발하다.

프레임워크 런타임 모델 비교표

| --- | --- | --- | --- | --- |

벤치 마크 수치는 정확한 값이 아니라 "감각" 단위로 본다. 같은 앱이 어떻게 다른 사이즈로 떨어지는지 비교하는 용도.

마이그레이션 시나리오 — "지금 새 프로젝트라면 무엇을 고를까"

가이드라인을 정직하게 정리.

- **콘텐츠 중심(블로그, 마케팅, 문서)**: Astro 5. 의심의 여지가 적다.

- **풀스택 SaaS, 대시보드, 이커머스(React 친화)**: Next.js 16 또는 React Router 7. 팀이 컨벤션을 좋아하면 Next, 더 자유로우면 RR7.

- **풀스택 SaaS(Vue 친화)**: Nuxt 4. Vapor 모드로 점진 도입.

- **풀스택 SaaS(가벼움/속도 우선)**: SvelteKit 3 또는 SolidStart.

- **이커머스 + SEO + 첫 페인트 속도 극한**: Qwik 2 + QwikCity. 단, 인력 풀이 작다는 점 감안.

- **백엔드 강한 팀, JS 최소화**: HTMX 2.

- **엔터프라이즈/금융/대규모 어드민**: Angular 19.

- **디자인 시스템 벤더**: Lit 4 + Mitosis로 멀티 프레임워크 대응.

상태/스타일/테스팅 표준은 거의 정해졌다. TanStack Query + Zustand + Tailwind 4 + shadcn/ui + Playwright + Vitest 3 + Storybook 9 조합이 React 진영의 사실상 디폴트다.

마무리 — 2026년의 결론

2026년 프론트엔드의 핵심 메시지는 세 가지다.

- **렌더링 모델이 프레임워크 선택보다 중요해졌다.** PPR/streaming/server components/server islands/resumability를 이해하면, 어느 프레임워크로 가도 의사결정이 쉬워진다.

- **Rust + native가 모든 빌드 레이어를 잠식했다.** Vite/Turbopack/Rspack/esbuild/swc/Bun/Deno/oxc — 어떤 조합을 골라도 5년 전 webpack 시대와는 차원이 다른 속도가 기본값이다.

- **공통 인프라가 표준화됐다.** TanStack Query + Tailwind 4 + shadcn/ui + Playwright + Vitest + Storybook은 프레임워크와 무관하게 거의 어디서나 쓸 수 있는 공통 카드다.

프레임워크 전쟁은 끝나지 않았지만, 2018~2022년 같은 "패러다임 전쟁"의 시기는 지났다. 지금은 각 모델의 장단점이 잘 드러난 시기, 즉 **고르기 좋은 시기**다.

References

- [React](https://react.dev) — React 공식 문서, Compiler, Actions, Server Components.

- [Vue.js](https://vuejs.org) — Vue 3.6, Vapor Mode 공식 문서.

- [Svelte](https://svelte.dev) — Svelte 5 runes, SvelteKit 3.

- [SolidJS](https://www.solidjs.com) — Solid 2.0, SolidStart 공식.

- [Qwik](https://qwik.dev) — Qwik 2, QwikCity.

- [Astro](https://astro.build) — Astro 5, server islands, content layer.

- [HTMX](https://htmx.org) — HTMX 2.

- [Next.js](https://nextjs.org) — Next.js 16, PPR, after, dynamicIO.

- [Nuxt](https://nuxt.com) — Nuxt 4, Nitro 3.

- [Angular](https://angular.dev) — Angular 19, signals, control flow.

- [Lit](https://lit.dev) — Lit 4.

- [Vite](https://vitejs.dev) — Vite 6, Rolldown.

- [Turbopack](https://turbo.build/pack) — Turbopack.

- [Rspack](https://rspack.dev) — Rspack, Rsbuild.

- [Bun](https://bun.sh) — Bun.

- [Tailwind CSS](https://tailwindcss.com) — Tailwind 4 Oxide.

- [shadcn/ui](https://ui.shadcn.com) — shadcn/ui.

- [TanStack](https://tanstack.com) — Query, Router, Start.

- [Vercel AI SDK](https://ai-sdk.dev) — Vercel AI SDK.