Chaos and Order

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

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

Intro — In May 2026 the real question is "which rendering model", not "which framework"

Three years ago picking a frontend meant picking React vs Vue vs Svelte. In May 2026 that framing is almost meaningless. **The real choice is which rendering model you want**, and the framework follows from that.

Five models cover the space.

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

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

3. **Resumability (Qwik 2)** — eliminating hydration entirely

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

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

On top of these five, big events stacked up between 2025 and 2026: **React Compiler GA**, **Vue Vapor stable**, **Svelte runes settled**, **Next.js 16 PPR stable**, **Remix folded into React Router 7**, **TanStack Start beta stabilizing**. This post collects all of it with real code shapes.

React 19/19.1 — Compiler GA, Actions, Server Components are the default

React 19.0 hit GA in late 2024, 19.1 followed in 2025, and the 19.1.x patch line stabilized through 2026. Three honest changes.

- **React Compiler GA**: the `react-compiler` package shipped stable in 2025. Manual memoization with `useMemo`, `useCallback`, and `React.memo` is essentially obsolete. The compiler runs as a Babel/SWC plugin and memoizes at build time.

- **Actions + `useActionState` + `useFormStatus`**: form submission and async mutations are absorbed into the React model. `<form action={...}>` is first class.

- **Server Components + the `use` hook**: RSC is no longer Next.js-specific. It is part of React core. You can unwrap promises directly with `use(promise)`.

A canonical React 19 Action.

'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>Subscribed</p>}

)

}

`useActionState` arrived in 19 and `useFormStatus` lets a child read the pending state of an ancestor form. Both succeed React 18's `useFormState`.

Vue 3.6 — Vapor Mode stable, the year VDOM became optional

In early 2026 Vue.js marked **Vapor Mode stable in 3.6**. Vapor is a render backend that skips the VDOM entirely and produces SolidJS-style compiled fine-grained reactivity that touches the DOM directly. The same SFC (`.vue`) compiles to two outputs (VDOM or Vapor).

- Smaller bundle, 30 to 50 percent less memory according to the official benchmarks, and first-render cost comparable to SolidJS.

- The trade-off: some VDOM-only third-party libraries do not work under Vapor. The first-party ecosystem (Vue Router, Pinia, VueUse) is compatible.

A Vue 3.6 Vapor component.

const count = ref(0)

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

A single `<script setup vapor>` switches the compile target. Vapor and VDOM can coexist in the same tree, which makes incremental migration possible.

Svelte 5 + SvelteKit 3 — runes API, a four-year debate finally settled

Svelte 5 went GA in late 2024 and SvelteKit followed with a major 3 through 2025. The headline is the **runes API**.

- `$state`, `$derived`, `$effect`, `$props`, `$bindable` are the new reactivity primitives.

- The old Svelte 3/4 magic where top-level `let` variables were implicitly reactive is now opt-in, and runes work anywhere, including outside components.

Svelte 5 runes in practice.

let count = $state(0)

let double = $derived(count * 2)

$effect(() => {

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

})

SvelteKit 3 ships server actions (the `actions` export in `+page.server.ts`), improved streaming, Vite 6-based builds, and `remote functions` (RPC-style server functions callable from the client) as first class.

SolidJS 2 + SolidStart — the original signals library reaches major 2

SolidJS shipped **2.0** in Q1 2026. As the library that treated signals as first-class from day one, the changes are evolutionary but meaningful.

- `createSignal`, `createMemo`, `createEffect` are unchanged.

- New primitives `createAsync`, `useAction`, and `query` integrate with SolidStart's RPC model.

- JSX compilation produces smaller code, and SSR streaming is stable.

SolidStart 1.0 went GA in fall 2025 on top of Vinxi (runtime) and Nitro (server). Routing is file-based and server functions use the `'use server'` directive.

function Counter() {

const [count, setCount] = createSignal(0)

createEffect(() => {

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

})

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

}

Solid stays small, fast, and "just JavaScript" in mental model. Once it clicks it is arguably the most intuitive of the bunch.

Qwik 2 — the resumability path

Qwik commits all the way to avoiding hydration. As of May 2026, Qwik 2 is in stable rollout and QwikCity is its meta-framework.

- **Resumability**: ship the server-rendered HTML, then only download the code for the specific component the user interacts with, at the moment of interaction. There is no upfront "replay everything" cost.

- Core API: `component$`, `$()`, `useSignal`, `useTask$`, `useStore`.

- The `$` suffix is the signal to the compiler to split that callback into its own chunk.

Qwik in practice.

export default component$(() => {

const count = useSignal(0)

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

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

})

Qwik's share is small but it owns the "large ecommerce plus SEO plus first paint" niche. Builder.io is the primary sponsor.

Astro 5 — server islands and the content layer made it the default for content sites

Astro shipped 5.0 in late 2024, then through 2025 became the de facto default for content-driven sites: blogs, marketing, docs, news, small ecommerce. As of May 2026 the headline features are:

- **Server islands**: dynamically render only certain regions on the server while keeping the rest static. This is Astro's flavor of Partial Prerendering.

- **Content Layer API**: a unified loader interface for static content and content pulled from external CMSes, databases, and APIs.

- **View Transitions API** integration, plus the familiar framework-agnostic island model (`<MyReactComponent client:visible />`) is unchanged.

A typical Astro page.

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

The Astro promise is "0KB JS by default, ship islands only where they are needed".

HTMX 2 — the minimize-JS path is alive and well

HTMX shipped 2.0 in 2024 and as of 2026 sits on a stable line. The model is straightforward: the server returns HTML fragments and HTMX swaps them into the page. "Backend-strong teams get 80% of the SPA win with 20% of the complexity."

- No build tooling required. A single script tag from a CDN works.

- Pairs naturally with Django, Rails, Phoenix, Laravel, FastAPI.

A canonical HTMX snippet.

Get current time

Parts of GitHub UI, Help Scout, some Discord admin views, and a steady stream of Django/Rails projects are adopting HTMX.

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

Next.js stepped from 15 to 16 in fall 2025. As of May 2026 the 16.1.x line is stable.

- **Partial Prerendering (PPR)**: ship a static shell immediately and stream the dynamic regions (each wrapped in Suspense). Marked stable.

- **`after()` API**: run side effects (logging, analytics, email queues) after the response is sent. Makes fire-and-forget safe in serverless environments.

- **dynamicIO**: dynamic versus static boundaries are inferred automatically based on where you use `cookies()`, `headers()`, or `searchParams`.

- **Turbopack** is now the default bundler for both dev and build.

A Next.js 16 page.

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

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

const { id } = await params

return (

)

}

Next.js is still the default React meta-framework. Vercel sponsors it and pushes RSC and PPR the hardest.

Remix to React Router 7 — they merged

Through 2024 and 2025 Remix was absorbed into React Router 7. As of May 2026 the two names point at one library.

- React Router 7 runs in two modes: SPA mode and "framework mode" (the old Remix).

- The loader/action model, nested routes, error boundaries, and form actions survive intact.

- Shopify sponsors it, which is why ecommerce plus Hydrogen is the headline pairing.

Old Remix code mostly runs unchanged on React Router 7. Imports move from `@remix-run/*` to `react-router`.

TanStack Start — Tanner Linsley's meta-framework

The TanStack ecosystem (Tanner Linsley's libraries — Query, Router, Table, Form, Virtual) is already one pillar of the React world. **TanStack Start** went into beta in 2025 and is heading toward 1.0 in 2026.

- Full-stack React framework. File-based routing plus type-safe loaders plus server functions.

- Built on Vite 6 plus Vinxi (or a custom server adapter).

- Aims for the niche of "I want more full-stack than React Router 7 but less opinion than Next.js".

A route definition.

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 — the full-stack answer for Vue

Nuxt, the Vue-side meta-framework, shipped a major 4 in 2025 and the 4.x line is stable in 2026.

- **Nitro 3** universal server — Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify Edge, all from the same source.

- Naturally pairs with Vue 3.6's Vapor mode.

- File-based routing, layouts, server routes (`server/api/`), and composables (`useFetch`, `useAsyncData`) are first class.

- A deep module ecosystem: `nuxt/content`, `nuxt/image`, `nuxt/ui`.

Angular 19 — signals plus control flow plus deferrable views, the comeback

Long pigeonholed as "stuck in enterprise", Angular reshaped itself fast through 17 to 19.

- **Signals** (`signal`, `computed`, `effect`) stabilized as a standalone API.

- **New control flow**: `@if`, `@for`, `@switch` template syntax replaces `*ngIf` and friends.

- **Deferrable views** (`@defer`): blocks that lazy-load when they enter the viewport.

- **Standalone components** are the default. NgModules are opt-in.

- SSR plus hydration is stable, and partial hydration arrived in 19.

Angular keeps a strong position in Korean and Japanese enterprise, finance, and healthcare.

Lit, Marko, Mitosis — small but meaningful cards

- **Lit 4**: Google's web components library. Strong for design systems and micro-frontends. ING, Adobe Spectrum, SAP UI5, and parts of GitHub's UI build on web components.

- **Marko**: eBay's SSR-first framework. Marko 6 adds fine-grained reactivity plus automatic code splitting. Niche externally, primary inside eBay.

- **Mitosis**: Builder.io's "write once, compile to many frameworks" tool. You author in a JSX-like syntax and it emits React, Vue, Svelte, Solid, Qwik, and Angular components. Useful for design-system and component-library vendors.

Rendering models — SSG vs SSR vs ISR vs PPR vs Streaming

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

PPR has become the "default mental model" answer of 2026. Cache what can be cached, leave only per-user and real-time pieces dynamic, with the boundaries explicit.

Build tools — Vite 6, Turbopack, Rspack, esbuild, swc, Bun, Deno 2, oxc

The bundler and build-tool market also crystallized in 2026.

- **Vite 6**: transitioning from Rollup to Rolldown (an oxc-based Rust bundler). The goal is dev on esbuild plus native ESM, and build on Rolldown. Effectively the shared base for SvelteKit, Nuxt, SolidStart, Astro, and TanStack Start.

- **Turbopack**: Vercel's Rust bundler for Next.js. Default in Next.js 16 for both dev and build.

- **Rsbuild + Rspack**: ByteDance's Rust-based webpack-compatible bundler. Easiest migration path from webpack.

- **esbuild**: Go-based transpiler/bundler. Widely used as an internal engine inside other tools.

- **swc**: Rust-based Babel replacement. Next.js's internal compiler.

- **Bun**: a JavaScript runtime plus package manager plus bundler in one. The 1.x line is stable and Node compatibility is essentially complete.

- **Deno 2**: shipped major 2 in late 2024, npm compatibility and workspaces are official. JSR (Deno's alternative npm registry) survives.

- **oxc**: a Rust JavaScript toolchain (parser, the `oxlint` linter, transformer). Also the core of Rolldown.

The big picture: Rust plus native is eating every build layer.

State management — Redux Toolkit, Zustand, Jotai, TanStack Query, SWR, Valtio, MobX, Effector

Global state management settled too in 2026.

- **Server state** is split between **TanStack Query** (React Query) and **SWR**. Effectively the default.

- **Small client state**: `useState` plus Context is enough more often than not.

- **Medium client state**: **Zustand** is the de facto default. Small, no boilerplate.

- **Atom-based client state**: **Jotai** is strong. Recoil is essentially in maintenance.

- **Proxy-based client state**: **Valtio**, **MobX**.

- **Enterprise client state**: **Redux Toolkit** still standard in large codebases. With RTK Query it also covers server state.

- **Event-based**: **Effector**, with a deep fan base in the Russian and European communities.

A canonical Zustand store.

interface Counter {

count: number

inc: () => void

}

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

count: 0,

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

}))

Styling — Tailwind 4 Oxide, CSS-in-JS retreats, shadcn/ui spreads

The CSS landscape in 2026.

- **Tailwind CSS 4**: GA in January 2025. The Oxide (Rust) engine made builds 10x to 100x faster. Native CSS variables, container queries, and cascade layers are first class. The config file is almost gone, replaced by CSS-first config.

- **CSS-in-JS retreat**: `styled-components` effectively declared maintenance mode in 2024. `Emotion` is alive but adoption in new projects has fallen. RSC compatibility is the main reason.

- **CSS Modules**: still the safest choice. First class in Vite, Next, and Nuxt.

- **Panda CSS**: zero-runtime CSS-in-JS from the ChakraUI team. Tailwind alternative.

- **vanilla-extract**: write CSS in TypeScript. Built by Seek.

- **UnoCSS**: an atomic CSS engine. Tailwind-compatible but lighter.

- **Mantine, Park UI, shadcn/ui**: component-library side. **shadcn/ui**'s "copy and paste into your repo" model produced explosive React-side adoption from 2024 to 2026. Park UI is the same idea ported to Vue, Solid, and Svelte.

shadcn/ui CLI usage.

npx shadcn@latest init

npx shadcn@latest add button card dialog

Testing — Playwright, Vitest 3, Storybook 9, Chromatic, Cypress

- **Playwright**: the de facto E2E default. Microsoft-backed, Chromium plus Firefox plus WebKit, with a strong trace viewer.

- **Vitest 3**: hit major 3 in 2025. Mostly Jest-compatible, Vite-friendly, and noticeably faster.

- **Storybook 9**: GA in early 2026. Lighter and Vite-first by default.

- **Chromatic**: visual regression SaaS paired with Storybook.

- **Cypress**: still meaningful share but new adoption is shifting to Playwright.

- **Jest**: alive, but new projects mostly start on Vitest.

Vercel AI SDK, T3 Stack, Refine and the side cards

- **Vercel AI SDK**: settled as the de facto LLM integration library for React, Vue, Svelte, and Solid. APIs like `useChat`, `useCompletion`, and `streamText`.

- **T3 Stack** (`create-t3-app`): Next.js plus tRPC plus Prisma plus Tailwind plus NextAuth, bundled. Still a popular full-stack starter.

- **Refine**: React framework dedicated to admin and dashboard apps. Pairs well with Ant Design, Material, and Mantine.

- **Hydrogen**: Shopify's React Router 7-based ecommerce framework.

Korean frontend ecosystem — Toss, Karrot, Wadiz, Coupang

- **Toss** runs React plus Next.js plus a homegrown design system plus an in-house monorepo toolchain. They open-source actively (`slash` React utility library, `toss/use-funnel`, `toss/suspensive`).

- **Karrot (Daangn)** runs React plus Next.js plus TanStack Query plus an in-house design system `seed-design`. Partial micro-frontend adoption.

- **Wadiz** has published multiple engineering blog posts on their Next.js plus TypeScript plus Tailwind stack.

- **Coupang** runs React Native (app) plus React/Next.js (web) plus a proprietary design system. Critical surfaces like checkout stay conservative.

- **Kakao, LINE, Woowa Brothers**: React plus Next.js is default. Some new projects experiment with SolidJS or Svelte.

At Korean conferences (FEConf, JSConf Korea) the dominant 2025 to 2026 themes were RSC, signals, runes, and PPR.

Japanese frontend ecosystem — CyberAgent, ZOZO, freee, Money Forward, SmartHR

- **CyberAgent** runs React plus Next.js on ABEMA (video streaming), AmebaBlog, Tapple, and more. They host Web Speed Hackathon and other frontend conferences.

- **ZOZO** (ZOZOTOWN) runs Next.js plus TypeScript plus an in-house design system. Phased micro-frontend adoption.

- **freee** (accounting SaaS) runs React plus TypeScript plus their `vibes` design system. Strong on accessibility.

- **Money Forward** is gradually migrating from a Rails plus React hybrid to Next.js.

- **SmartHR** runs React plus their OSS `smarthr-ui` design system. Widely cited as the Japanese reference for accessibility and design-system operation.

The Japanese ecosystem leans slightly more toward Vue and Nuxt than the Korean one. Core NuxtLabs members are Japan-based, and Vue Fes Japan is an active conference.

Framework runtime model comparison

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

Treat the numbers as feel, not precision. The point is order-of-magnitude comparison for the same hello-world.

Migration scenarios — "if I were starting a new project today"

Honest defaults.

- **Content-first sites (blogs, marketing, docs)**: Astro 5. Hard to argue with.

- **Full-stack SaaS, dashboards, ecommerce (React-friendly)**: Next.js 16 or React Router 7. If the team likes opinionated conventions, Next; if they want more freedom, RR7.

- **Full-stack SaaS (Vue-friendly)**: Nuxt 4. Adopt Vapor mode incrementally.

- **Full-stack SaaS (light, fast)**: SvelteKit 3 or SolidStart.

- **Ecommerce plus SEO plus first-paint extremism**: Qwik 2 plus QwikCity. The talent pool is smaller, factor that in.

- **Backend-strong team, minimize JS**: HTMX 2.

- **Enterprise, finance, large admin**: Angular 19.

- **Design-system vendor**: Lit 4 plus Mitosis for multi-framework output.

The state/style/testing stack is basically settled. TanStack Query plus Zustand plus Tailwind 4 plus shadcn/ui plus Playwright plus Vitest 3 plus Storybook 9 is the de facto React combo.

Closing — the takeaways for 2026

Three core messages.

- **The rendering model matters more than the framework choice now.** Understanding PPR, streaming, server components, server islands, and resumability makes the rest of the choice easy.

- **Rust plus native ate every build layer.** Vite, Turbopack, Rspack, esbuild, swc, Bun, Deno, and oxc — whatever combination you choose, "fast" is the baseline in a way it never was in the webpack era.

- **The shared infrastructure standardized.** TanStack Query, Tailwind 4, shadcn/ui, Playwright, Vitest, and Storybook are roughly framework-independent and applicable nearly everywhere.

The framework war is not over, but the 2018 to 2022 "paradigm war" phase is. This is the period where each model's strengths and weaknesses are well understood — meaning **it is a good time to choose**.

References

- [React](https://react.dev) — React official docs, Compiler, Actions, Server Components.

- [Vue.js](https://vuejs.org) — Vue 3.6 and Vapor Mode docs.

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

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

- [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.