Meta-Frameworks

Why React is just a UI library, and why you need a Meta-Framework (like Next.js or Remix) to build a production-ready application.

React5 min readConcept 48 of 48

React is a Library, Not a Framework

React itself only does one thing: it renders UI components to the DOM and manages their state. It has absolutely no opinion on routing, data fetching, server-side rendering, or building for production.

A **Meta-Framework** is a framework built *on top* of React. It takes the React rendering engine and wraps it in a complete, opinionated architecture for building full-stack web applications.

The Missing Pieces

If you try to build a complex app with raw React, you eventually have to stitch together a dozen third-party libraries: React Router for navigation, Webpack/Vite for bundling, Express for your backend, etc.

Meta-frameworks solve this by providing everything out of the box. They give you file-system based routing, seamless Server-Side Rendering (SSR), built-in API routes, and advanced image/font optimizations.

The Big Three

Currently, there are three dominant React meta-frameworks you should know:

**1. Next.js (by Vercel):** The industry standard. Pioneered React Server Components (App Router) and offers a massive ecosystem. Best for complex, highly dynamic applications.

**2. Remix (by Shopify):** Focuses heavily on web fundamentals, standard HTTP Request/Response APIs, and nested routing. It uses standard web forms instead of complex client-side state.

**3. Astro:** The king of content-driven sites (like blogs or marketing pages). It uses 'Island Architecture' to ship zero JavaScript by default, only hydrating the specific interactive components you tell it to.

The Stack Breakdown

Compare what React gives you natively versus what a Meta-Framework provides. See how they stack together to create a production-ready application.

// package.json (Raw React via Vite)
// You have to install your own router, etc.
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.0"
},
"devDependencies": {
"vite": "^5.1.0"
}
}
// package.json (Next.js Meta-Framework)
// Everything included out of the box.
{
"dependencies": {
"next": "14.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
// No separate router needed!
// No separate bundler needed!
}
The Meta-Framework Layer
File-System
Routing
SSR & SSG
Rendering
Backend API
Routes
Optimized
Bundler
REACT CORE
ComponentsState (Hooks)Virtual DOM

A Meta-Framework wraps the React rendering engine with a complete full-stack architecture, providing routing, server rendering, API endpoints, and production build optimizations out of the box.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why doesn't React include a router (like `<Route path='/about'>`) out of the box?
  2. 2Which of the following features is provided by a Meta-Framework (like Next.js), but NOT by raw React?
  3. 3If you are building a static blog that needs to be extremely fast and ship almost zero JavaScript to the client, which Meta-Framework is best suited for the job?

Remember this

  • React is just a UI library. It does not handle routing, SSR, or backend APIs.
  • Meta-Frameworks (Next.js, Remix, Astro) wrap React with a full-stack architecture.
  • Next.js is the industry standard for complex, dynamic applications.
  • Astro is the best choice for fast, content-heavy static sites (zero-JS by default).
  • If you just want a simple Client-Side SPA without a meta-framework, use Vite + React.

Done with this concept?

Mark it complete to track your progress. No login needed.