[Frontend Architecture] Frameworks in Detail - React/Vue/Svelte/Next.js/Astro

About this article

As the fourth installment of the “Frontend Architecture” category in the series “Architecture Crash Course for the Generative-AI Era,” this article explains frontend frameworks.

There are many choices, and the primary axis is “can it survive 5 years of operation?” This article compares UI libraries like React/Vue/Svelte/Astro and meta-frameworks like Next.js/Nuxt/SvelteKit, covering how to choose by use case, hiring availability, and AI-era code-generation accuracy.

Choose by “will you still be using it 5 years from now?”

Axis	Content
Ecosystem	Richness, maturity, adoption examples of surrounding libraries
Learning cost	Quality of official documentation, volume of localized info
Performance	Bundle size, runtime overhead
Hiring availability	Number of job postings, recognition in the hiring market
Meta-framework	Maturity of Next.js/Nuxt etc.

In particular, hiring availability cannot be ignored. Choose a minor framework and you’ll face the tragedy of “spending 3 months recruiting and finding no one who can develop it.” In practice, prioritizing hiring and team scalability over technical superiority is often the right answer.

The selection standard is “5-year operation and hiring availability” - not “technically the best.”

Classification of libraries / frameworks

Modern frontend has a layered structure, and the mainstream is to combine layers like “React + Next.js” rather than “React alone.” Understanding this hierarchy is the starting point of design.

flowchart TB
    META["Meta-framework layer<br/>Next.js / Nuxt / SvelteKit / Astro<br/>(routing, SSR, build integration)"]
    UI["UI library layer<br/>React / Vue / Svelte / Solid<br/>(component description)"]
    BUNDLER["Bundler/build layer<br/>Vite / Turbopack / esbuild"]
    RUNTIME["Runtime layer<br/>Node.js / Bun / Deno / Edge"]
    META --> UI
    UI --> BUNDLER
    BUNDLER --> RUNTIME
    classDef meta fill:#dbeafe,stroke:#2563eb,stroke-width:2px;
    classDef ui fill:#fef3c7,stroke:#d97706;
    classDef bundler fill:#fae8ff,stroke:#a21caf;
    classDef runtime fill:#dcfce7,stroke:#16a34a;
    class META meta;
    class UI ui;
    class BUNDLER bundler;
    class RUNTIME runtime;

Class	Representatives	Role
UI library	React / Vue / Svelte / Solid	Component description
Meta-framework	Next.js / Nuxt / SvelteKit	Routing, SSR, build integration
Multi-framework foundation	Astro	Mixes multiple UI libraries
Full-stack	Remix / RedwoodJS	Integrates with the backend

Even when people say “build it with React,” the reality is that React almost always runs on top of a meta-framework like Next.js, Remix, or Astro. UI libraries alone lack routing, build, and SSR, so going UI-library-only is unrealistic in modern projects.

“React” and “Next.js” sit at different layers. Choosing the meta-framework is the substantive decision.

React

React is a UI library developed by Meta, and even today it holds the overwhelming No.1 position. In ecosystem, job count, and information volume, it leads the others by a wide margin - and unless there’s a special reason, you can choose it as the default.

Strengths	Weaknesses
Huge ecosystem, abundant peripheral libraries	”React core” alone is insufficient - you need peripherals
Job count and information volume are overwhelming	Design freedom is high, easy to get lost
Meta-led continuous development, RSC and other evolution	Features change quickly

React intentionally provides only “the bare minimum” of features - routing, state management, styling, etc. are filled in by users via peripheral libraries. This freedom is both a strength and a weakness.

For large-scale, long-term, or hiring-focused projects, React is the only choice. Place it as the default.

Vue

Vue is a UI library developed by Evan You (formerly of Google), gaining strong support thanks to its low learning cost. It’s especially popular in Japan and China, often adopted by government agencies and gradual replacements of legacy systems.

Strengths	Weaknesses
Single File Components (SFC) feel intuitive	Lags React in enterprise adoption
Officials provide what’s needed (Router / Pinia)	Fewer job postings than React
Gentle learning curve, HTML-leaning	Fewer accumulated large-scale cases compared to React

Vue’s SFC (Single File Component) is a format where <template> <script> <style> are written in one file with HTML-like syntax. For people coming from HTML, it feels intuitive and is very approachable for beginners. With Composition API (Vue 3), large-scale projects are also well supported.

A strong choice for Japan-region projects, small-to-medium scale, or when learning cost matters most.

Svelte / SvelteKit

Svelte is a UI library getting attention for its innovative approach of “no virtual DOM, optimized at compile time.” It minimizes the bundle at compile time, so the runtime size is tiny and performance is outstanding.

Strengths	Weaknesses
Tiny bundle size, snappy operation	Smaller ecosystem than React/Vue
Less code, intuitive reactivity	Fewer large enterprise track records
Svelte 5 introduces Runes (new reactivity)	Job count and info volume lag React/Vue

Svelte’s writing experience is described as “the framework closest to vanilla JS,” and it’s not unusual to see code volume reduced by 30-50%. However, large-enterprise adoption is still limited, so caution is needed from a hiring-availability standpoint.

Solid / Qwik (emerging)

Solid and Qwik are emerging frameworks that preserve a React-like feel while pursuing performance through different philosophies. They are technically excellent, but adoption track records are thin, so they are best suited for experimental projects right now.

FW	Characteristics
SolidJS	JSX syntax, no virtual DOM needed, near-React-compatible, fast
Qwik	Resumability brings JS shipped to nearly zero

Qwik’s resumability is an innovative technology where the client picks up the server-rendered state directly, with near-zero hydration cost. Because it ships almost no JS, initial load is astonishingly fast. However, the concept is complex, the team’s learning cost is high, and new adoption should be decided cautiously.

Novelty is high but adoption is still rare. Production deployment may be premature.

Astro

Astro is a multi-framework foundation specialized for content sites. It takes the unique approach of shipping zero JS by default and running only the necessary parts as Islands using React/Vue/Svelte.

Strengths	Suited for
Zero JS by default (Islands Architecture)	Blogs, documentation
Mix of React/Vue/Svelte	Marketing sites
Content collections, Markdown-native	Portfolios
Overwhelmingly fast (Lighthouse 100 is easy)	LPs

This series’s home, senkohome.com, is also built on Astro. For content-centric sites like blogs and documentation, Astro’s SSG can be called the fastest modern option.

The first choice for blogs. For content sites you can run them far faster than Next.js SSG.

Next.js / Nuxt

Next.js is a React meta-framework developed by Vercel, the de facto React standard. It’s so dominant you could say “using React = using Next.js.”

Main features:

App Router (RSC + Server Actions support)
Per-page switching of SSR / SSG / ISR
Image optimization / font optimization
Middleware / Edge Functions

Suited for: SaaS, e-commerce, large-scale web apps, SEO-focused sites. It’s extremely tightly integrated with Vercel hosting, so on Vercel you can ship to production in record time.

Nuxt is the Vue meta-framework, occupying the position equivalent to Next.js. Centered on Vue, it provides features equivalent to Next.js (SSR/SSG/ISR, file-based routing, image optimization, etc.). Nitro is Nuxt’s underlying server engine, and its strength is “universality” - deployable to Vercel, Cloudflare, Netlify, or self-hosted servers.

The modern feel is Next.js if you choose React. For Vue, Nuxt is the standard.

Modern trends

Frontend trends shift rapidly, but here are the streams settling in now. These are not mere fads - they are predicted to “remain mainstream for years to come.”

Spread of RSC (React Server Components) - the decisive blow for JS bundle reduction
Server Actions - new API where form submission can be written concisely
Generalization of Islands / Partial Hydration - Astro-originated philosophy goes mainstream
Type-safe full-stack (tRPC / Next.js + Zod / Astro Actions) - shared types between backend and frontend
Edge First - low-latency delivery via Vercel / Cloudflare / Deno Deploy

In particular, “type-safe full-stack” means sharing backend API types with the frontend so TypeScript can use them like function calls - tRPC being the leading example. It improves both productivity and bug reduction.

”The day ‘cutting-edge at the time’ became a landmine” (industry stories)

When AngularJS (Angular’s predecessor) reached official end-of-support in January 2022, projects worldwide were forced into full rewrites - a case often cited as a frontend-selection lesson. AngularJS and Angular (2 and beyond) are “different frameworks,” more like a “from-scratch rebuild” than a migration, and many sites that trusted “it’s by Google so it’s safe” were hit hard.

Many teams that exhausted themselves on the AngularJS-to-new-Angular migration ended up switching to React in the end. It’s a textbook case of “cutting-edge at adoption” becoming “a landmine 5 years later.” Similar stories apply to Backbone, Ember, Knockout, and Meteor - all stars of their era, but rarely showing up on new-adoption shortlists today.

“Will that framework’s job listings still be around in 3 years?” If you can’t answer that with confidence, leaning toward the mainstream is the safe move.

Selection by case

Framework selection has clear right answers by use case. Choose along the following matrix and you won’t go badly wrong.

Use case	Recommendation
Blogs / marketing sites	Astro
SaaS / e-commerce / large web apps	Next.js
Vue-culture mid-to-large scale	Nuxt
Lightweight SPA / max performance	Svelte / SvelteKit
Adding UI to existing Rails/Django	Hotwire/Turbo or partial Vue/React
Ultra-fast / low-bandwidth	Qwik / Astro

The blog this series is hosted on (senkohome.com) is Astro, while apps like trivia-master use React + Vite - we follow the policy of “choosing the optimal one per use case.”

How to choose React meta-frameworks

Once you’ve decided to “adopt React,” choosing within meta-frameworks matters too. Next.js dominates, but other options exist depending on requirements.

FW	Characteristics
Next.js	Standard, high Vercel coupling, feature-rich
Remix	Form-centric, Web-standards-focused, acquired by Shopify
RedwoodJS	GraphQL-premised, full-stack-oriented
TanStack Start	Emerging, TanStack-system integrated, type-safe

Remix was acquired by Shopify, with integration with React Router progressing. “Default to Next.js” is the safest, with the largest information volume and support range.

Practical FW × use-case maturity matrix (as of April 2026)

Frontend FWs are chosen not by “which is newest” but by use case × scale × people. Below is the practical 2026 matrix.

Use case	Team size	First choice	Hiring difficulty	5-year forecast
Blogs/docs/LP	1-5	Astro	Low	Up
Small-mid SaaS	3-20	Next.js + Tailwind + shadcn/ui	Low	Mainstream
Large SaaS	20-100	Next.js App Router + RSC	Mid	Mainstream
Admin-panel-centric	1-10	Vite + React + shadcn/ui	Low	Continuing
Vue-culture SaaS	5-30	Nuxt 3	Mid	Continuing
Lightweight / max perf	1-10	SvelteKit	High	Niche
Edge low-latency-focused	~10	Astro + Hono / Qwik	High	Experimental
Shopify / Rails-existing	-	Hotwire / Turbo	Low	Specific domains

“React + Next.js is the de facto AI tool standard” - UI generation AIs like v0, Bolt, and Lovable produce the highest-accuracy code on this combination. Vue/Nuxt is also at a usable level, but trails by one step in AI training-data volume. Svelte/Qwik/Solid may be technically excellent, but hiring becomes 10x harder, so cautious judgment is needed outside personal projects.

For business: React + Next.js + Tailwind + shadcn/ui; for content: Astro. These two without hesitation.

Frontend FW selection’s pitfalls and forbidden moves

Here are the typical accidents in FW selection. Choosing by “new and edgy” leaves you stuck on hiring 5 years later.

Forbidden move	Why it’s bad
Sticking with a deprecated FW like AngularJS	Official EOL Jan 2022, full rewrites worldwide
Build routing yourself in raw React	No reason not to use Next.js or React Router. Reinventing the wheel
Build a blog with Next.js SSR	With Astro, static delivery is 100x faster and 100x cheaper
Skip a major-version upgrade for 3+ years	Major versions of Next.js/Vue/Svelte come 1-2 times a year. Catching up all at once is impossible
Adopting edgy emerging FWs (Qwik/Solid) at work	Hiring takes 6-12 months. Recommended for personal dev only
Manipulating the React DOM directly (getElementById)	Breaks the framework’s premise. Virtual DOM breaks and re-renders fail
Adopting Svelte on a 30+ person team	Hiring market is thin, engineers don’t gather
New project with Create React App (CRA)	Official maintenance ended in 2023. Use Vite/Next.js
Writing only Client Components without understanding RSC	Zero benefit from Next.js App Router
Using Tailwind without configuration	Design Tokens don’t work, color/spacing inconsistencies emerge

AngularJS EOL in January 2022, Create React App maintenance ending in 2023, styled-components entering maintenance mode in March 2024. The frontend world has rapid technical turnover, and “cutting-edge at the time” turns into liability within years - a textbook pattern. Putting “will it still have official support in 5 years” as a selection axis is critical.

Choose by hiring availability and AI accuracy over trends. The iron rule for business is to lean toward the mainstream.

AI-era perspective

When AI-driven development is the premise, the deciding factor for frontend FWs becomes “does AI have it abundantly as training data?” UI generation AIs like v0, Bolt, and Lovable are optimized for the React + Next.js + Tailwind + shadcn/ui (a public UI component collection designed for copy-paste) combo, and accuracy drops a notch on other stacks.

Favored in the AI era	Disfavored in the AI era
React + Next.js (AI tools optimized)	Svelte/Solid/Qwik (less training data)
Astro (Markdown + Islands is clear)	Custom meta-frameworks
Tailwind + shadcn/ui (AI can copy-paste precisely)	Custom CSS design / in-house design systems
Server Components convention (boundaries are explicit)	Hand-written hydration control

Even though Svelte and Qwik are technically excellent, AI frequently mixes in old APIs or strays from official patterns. The contemporary picture is sharply “AI’s productivity boost = React stack’s advantage”: “what’s technically best” and “what AI can write fastest” are different problems. Astro for blogs and Next.js + Tailwind + shadcn for apps - this “AI-premised composition” has effectively become the front-runner from personal to mid-scale projects.

Common misconceptions

Choose because it’s trendy - newest at adoption can stagnate 2 years later. Decide after imagining “5-year-later job listings”
Build with raw React - hand-rolling routing/SSR becomes unmaintainable. “Meta-FW (Next.js/Astro etc.) is a premise”
Build a blog with Next.js - bringing Next.js complexity to a problem Astro solves in minutes is over-design
Adopt RSC because it’s new - the concept is hard, deadlines arrive before the team understands it, chaos. Decide by “balance with learning cost”

What to decide - what is your project’s answer?

For each of the following, try to articulate your project’s answer in 1-2 sentences. Starting work with these vague always invites later questions like “why did we decide this again?”

UI library (React / Vue / Svelte etc.)
Meta FW (Next / Nuxt / SvelteKit / Astro)
Whether to adopt RSC (when adopting Next.js)
Supported browser range (IE, old Safari)
Mobile Web support (whether or not to build a PWA (Progressive Web App, the framework that delivers app-like experiences using Web tech))
Boundaries with parts that no-code can handle

How to make the final call

The core of frontend FW selection is “simultaneously satisfying the three points of 5-year operation + hiring + AI accuracy.” Not technical excellence alone - whether maintenance won’t stagnate in 2 years, whether developers can be found in the hiring market, whether AI tools can write it accurately. Choose an FW that satisfies all three.

The two FWs that overwhelmingly satisfy these three are “React + Next.js (for apps)” and “Astro (for content).” Picking one or the other based on use case is the no-miss decision. Technically excellent Svelte/Qwik are options too, but they trail in people-and-AI-training-data depth, raising the adoption bar outside hobby projects.

Another axis is “don’t confuse the UI-library vs meta-FW layers.” Modern frontends don’t run on React alone but on React-on-top-of-Next.js/Astro, not on Vue alone but on Vue-on-top-of-Nuxt - so the substantive selection happens at the meta-FW layer. Going meta-FW-less and hand-rolling routing/SSR/build in raw React has become “a non-realistic option.”

In the AI era especially, React + Next.js + Tailwind + shadcn/ui is optimized in v0/Bolt/Lovable and similar generation tools, with markedly higher accuracy. The picture of “the FW AI can write best” beating “the technically best FW” will continue.

The selection priorities, summarized:

Will it survive 5-year operation (people, info volume, LTS (Long Term Support) viewpoints)
Select at the meta-FW layer (not raw React but Next.js/Nuxt/SvelteKit/Astro)
Use the right one per use case (apps = Next.js, content = Astro)
Weigh AI training-data depth (mainstream stacks = AI writes better)

Summary

This article covered frameworks in detail, including UI libraries, meta-FWs, hiring availability, and AI accuracy.

Apps go on React + Next.js, content on Astro. The combination that maximizes AI benefits is the practical answer in 2026.

Next time we’ll cover CSS design (Tailwind / CSS Modules / CSS-in-JS).

Back to series TOC -> ‘Architecture Crash Course for the Generative-AI Era’: How to Read This Book

I hope you’ll read the next article as well.