React Native
Summarize this blog post with:
Framework Comparison · Next.js 15 · React 19
Next.js
VS
React
The Complete Guide to When You Need the Framework (and When You Don’t)
Next.js IS React, it is a framework built on top of it. The question is never “which is better”, it is whether your project needs what Next.js adds: server-side rendering, file-based routing, Partial Pre-Rendering, Turbopack, and full-stack API routes in one codebase.
The Most Important Thing to Understand First
Next.js vs React is not a direct comparison between two competing technologies. Next.js is built on top of React, every Next.js application is a React application. You cannot use Next.js without React. The actual decision is: does your project need what Next.js adds on top of plain React, or does plain React (with Vite) give you everything you need?
React gives you a blank canvas. Next.js gives you a production-ready studio with the canvas already set up, the lighting configured, and the most common tools pre-installed. For some projects, the pre-configured studio is exactly what you need. For others, the configuration overhead adds complexity you do not need.
Create React App is dead in 2026. CRA has been effectively unmaintained since 2023. The React team no longer recommends it. Vite has replaced CRA as the standard build tool for plain React SPAs, 60-millisecond hot module replacement, fast cold starts, modern ESM-based dev server. For new projects in 2026: use Vite for client-side React SPAs, or Next.js 15 for full-stack React applications. The React documentation points to Next.js, Remix, or Gatsby, not CRA, for production apps.
2–3x
Faster initial load, Next.js vs React SPA
60ms
Vite HMR (plain React in 2026)
70%
LCP improvement with Next.js PPR vs full SSR
50–90%
Client JS bundle reduction with React Server Components
10x
Faster HMR, Turbopack vs Webpack
45%
New React projects using Next.js (2025)
What Each One Actually Is
▲ Next.js 15: The Production Framework
Next.js is an open-source full-stack framework built on top of React, created and maintained by Vercel. Next.js 15 (2026 stable release) adds to plain React: file-based routing (create app/about/page.tsx, you have /about, no React Router config); multiple rendering strategies selectable per-page (SSR, SSG, ISR, CSR, PPR); React Server Components (components that run on the server, never ship JS to the browser); built-in API routes (app/api/route.ts for server endpoints without a separate backend); automatic image optimization (next/image); font optimization (next/font); Turbopack for development builds (10x faster than Webpack); and Partial Pre-Rendering, the signature Next.js 15 performance architecture. OpenAI, Spotify, TikTok, and Shopify Hydrogen are built on Next.js.
⚡ React 19: The UI Library
React is a JavaScript library for building user interfaces using reusable, composable components. React 19 (2026) introduces the React Compiler (stable, automatic re-render optimization, eliminates manual useMemo/useCallback), Actions (async form handling without separate event handlers), and native document metadata support (title, meta tags without react-helmet). Plain React handles one thing: rendering UI. Routing, data fetching, server-side rendering, image optimization, and build tooling are assembled separately, React Router for routing, TanStack Query for data fetching, Vite for bundling (not CRA, that is deprecated). The flexibility is React’s advantage and its overhead.
Rendering Strategies: The Core Next.js Advantage
Plain React renders everything in the browser (CSR, Client-Side Rendering). This means users download JavaScript, the browser executes it, and then React builds the UI, adding 1–3 seconds of blank-page time before any content appears. Next.js gives you four rendering strategies plus two newer architectures, selectable per-page or per-component.
⚡ CSR: Client-Side Rendering
Browser downloads JS → executes → React builds page. Default in plain React SPAs and any Next.js component with “use client”. Best for: interactive UI behind authentication where SEO does not matter.
React Default · use client▲ SSR: Server-Side Rendering
Server renders full HTML on every request, sends to browser. User sees content immediately; JS hydrates afterward. Best for: pages with frequently changing data (user dashboards, search results, live inventory).
Next.js · dynamic data▲ SSG: Static Site Generation
HTML pre-rendered at build time, served from CDN globally. Fastest possible delivery. Best for: blog posts, marketing pages, documentation, content that rarely changes.
Next.js · CDN-fastest · SEO▲ ISR: Incremental Static Regeneration
Static pages that regenerate in the background after a set revalidation period. Best for: headless CMS content, product catalogs, content that updates periodically but not per-request.
Next.js · revalidate: 60▲ PPR: Partial Pre-Rendering
Next.js 15 signature feature. Static shell (CDN instant) + streamed dynamic holes. Product page layout loads at CDN speed; personalized pricing/inventory streams in. Up to 70% LCP improvement.
Next.js 15 · NEW · 70% LCP gain▲ RSC: React Server Components
Components that run only on the server, never ship JS to browser. Data fetching, DB queries, heavy logic stay server-side. 50–90% client JS reduction on data-heavy pages. No useEffect needed for server data.
Next.js 13+ · 50–90% less JS▲ Partial Pre-Rendering: The Next.js 15 Breakthrough
PPR is the most architecturally significant Next.js 15 feature. A PPR page has a static shell (layout, nav, non-personalized content) pre-rendered at build time and served from CDN at approximately 50ms latency. Dynamic holes within that shell (personalized content, real-time data, user-specific pricing) stream in from the server after the static shell loads. For an eCommerce product page: the product name, images, and description are static shell (CDN-instant). The price, inventory status, and “customers also bought” section are dynamic holes (streamed). LCP improvements of up to 70% versus full SSR have been documented. Plain React has no equivalent, everything is CSR waterfall.
Turbopack: The Development Speed Revolution
One of the most practically impactful Next.js 15 changes is the stable release of Turbopack, a Rust-based bundler that replaces the JavaScript-based Webpack that previously powered Next.js development builds.
▲ Turbopack in Next.js 15: What Changes
- 10x faster hot module replacement than Webpack, updates that took seconds now take milliseconds
- Development cold starts (first
next dev) dramatically faster, from 10–30 seconds to under 2 seconds on large projects - Turbopack powers 90%+ of Vercel deployments in 2026
- No configuration required, automatic in Next.js 15
- Closes the dev-experience gap between Next.js and Vite (which React SPAs use)
- Production builds still use Webpack by default in 2026 (Turbopack production mode is in beta)
Before Turbopack, the main developer complaint about Next.js was slow development server restarts. A large Next.js project with 200+ pages could take 20–30 seconds to cold start and 2–5 seconds to hot reload after every change. Turbopack reduces those to under 2 seconds and under 100ms respectively. For developers previously choosing plain React + Vite specifically for development speed, Turbopack eliminates that advantage.
Head-to-Head Comparison: 12 Key Factors
| Factor | ▲ Next.js 15 | ⚡ React 19 (+ Vite) | Winner |
|---|---|---|---|
| SEO | SSR/SSG/ISR/PPR, full HTML to crawlers. Google sees rendered content. | CSR only, Google must execute JS. Risk of indexing delays for dynamic content. | Next.js |
| Initial Page Load | 2–3x faster than CSR. PPR: static shell instant + streamed dynamic content. | Browser must download, parse, execute JS before content appears. | Next.js |
| Client JavaScript Size | RSC: 50–90% JS reduction for server-logic-heavy pages. Only client-interactive code ships. | Full application bundle ships to browser including all data-fetching and rendering logic. | Next.js (RSC) |
| Routing | File-based routing in /app. Create a file, have a route. Zero config. | No built-in routing. Add React Router (additional dep, manual config). | Next.js |
| API / Backend | Built-in API routes (app/api/). Full-stack in one project. | Requires separate backend (Express, FastAPI, etc.) and deployment. | Next.js |
| Dev Build Speed | Turbopack: 10x faster than Webpack. Under 100ms HMR in 2026. | Vite: 60ms HMR. Comparable to Next.js + Turbopack. | Tie (both ~60–100ms HMR) |
| Flexibility | Opinionated file structure. Best when following Next.js conventions. | Total freedom, choose your own bundler, router, state manager, CSS solution. | React (for maximum control) |
| Learning Curve | Steeper, RSC mental model (server vs client components), App Router, caching model. | Lower, just React concepts (components, hooks, state, props). | React (simpler to start) |
| Headless CMS Integration | ISR: content auto-revalidates without full rebuild. PPR for content + personalization. | Requires custom refresh mechanisms. Static content needs build triggers. | Next.js |
| Deployment | Requires Node.js server for SSR/API routes (or edge runtime). Static export option available. | Static file output, deployable anywhere: S3, CloudFront, GitHub Pages, any CDN. | React (simpler deployment for static) |
| Image Optimization | next/image: automatic WebP conversion, lazy loading, responsive sizes, blur placeholder. | Manual image optimization required (custom setup or third-party service). | Next.js |
| React Native / Mobile | Not applicable, Next.js is web-only. | React + React Native share component knowledge. Mobile + web from one team. | React (+ React Native) |
The Ecosystem Around Each
▲ The Next.js Stack (2026)
- FrameworkNext.js 15
- LanguageTypeScript (default)
- StylingTailwind CSS
- UI Componentsshadcn/ui, Radix UI
- DatabasePrisma + PostgreSQL / Supabase
- AuthNextAuth.js / Clerk
- State ManagementZustand / Jotai
- Data FetchingRSC (server) + TanStack Query (client)
- AI IntegrationVercel AI SDK
- DeploymentVercel (native) / AWS / Railway
- CMS (Headless)WordPress + WP GraphQL / Contentful
⚡ The React SPA Stack (2026)
- BundlerVite (not CRA)
- LanguageTypeScript
- StylingTailwind CSS
- UI Componentsshadcn/ui, MUI, Ant Design
- RoutingReact Router v7 / TanStack Router
- State ManagementZustand / Jotai / Redux Toolkit
- Data FetchingTanStack Query / SWR
- Backend (separate)Express / FastAPI / tRPC
- DeploymentNetlify / Vercel (static) / S3 + CloudFront
- MobileReact Native + Expo (code share)
A2Z Dev Center: Headless WordPress + Next.js
A2Z Dev Center’s preferred full-stack web architecture for content-rich sites in 2026 is headless WordPress + Next.js: WordPress as the content management system (editors use the familiar Gutenberg interface for blog posts, pages, and custom post types) connected to a Next.js 15 frontend via the WordPress REST API or WPGraphQL.
▲ Headless WordPress + Next.js: The A2Z Architecture
- WordPress admin: editors write content in familiar Gutenberg editor, no Next.js knowledge required
- WPGraphQL: WordPress exposes content as a GraphQL API consumed by Next.js at build time
- Next.js ISR: blog posts and pages are statically generated at build time and revalidated when content changes, CDN-fast delivery with always-fresh content
- Next.js PPR: product or service pages combine static layouts with dynamic personalization
- HubSpot CRM: contact forms in Next.js submit directly to HubSpot via API, leads flow to CRM from day 1
- Benefit: the performance of a statically generated site, the content flexibility of WordPress, and the developer experience of Next.js, at A2Z Dev Center rates of $40–$80/hr
Project-Type Decision Guide
Marketing / Landing Page
Next.js
SSG from CDN, fastest possible LCP, full SEO control, ISR for content updates without rebuild.
Blog / Content Site
Next.js
Headless CMS + ISR is the 2026 standard. WordPress + Next.js + WPGraphQL equals the best content + performance combo.
eCommerce Store
Next.js
PPR for product pages: static layout + streamed pricing/inventory. Faster time to conversion. Shopify Hydrogen is Next.js-based.
Admin Dashboard
React + Vite
Behind auth, SEO irrelevant. Vite gives 60ms HMR, simpler deployment to static CDN, full architectural control.
SaaS Product
Next.js
Public marketing pages (SSG/PPR for SEO) + authenticated app pages (CSR) in one project. Optimal hybrid.
AI Chat Interface
Next.js
Vercel AI SDK + React Server Components enable streaming AI responses progressively. 78% of AI teams choose Next.js.
Internal Tool / Portal
React + Vite
No SEO, no public traffic. React + Vite is lighter, faster to build, deploys as static files. No Node server needed.
Mobile + Web (Same Codebase)
React + React Native
React Native shares component logic with React web. Next.js is web-only, use Expo for mobile + React + Vite for web.
Documentation Site
Next.js
Full-text search, SSG-fast, versioning support. Next.js (or similar frameworks like Nextra built on Next.js) is the 2026 standard.
API-First Application
Evaluate Both
Next.js API routes handle most cases. Complex API-only backends with Express/FastAPI may still pair better with React SPA frontend.
When to Choose Next.js vs Plain React
▲ Choose Next.js When
- SEO matters, any page that needs Google indexing
- Public-facing content site (blog, marketing, landing pages)
- eCommerce, fast initial load directly affects conversion
- Headless CMS (WordPress, Contentful, Sanity) with ISR
- SaaS with public marketing pages + authenticated app pages
- Full-stack in one repo, API routes eliminate separate backend
- AI-powered interfaces, Vercel AI SDK + RSC streaming
- Shopify Hydrogen (React-based) for headless eCommerce
- Developer experience matters, Turbopack, file-based routing
⚡ Choose Plain React (+ Vite) When
- App lives entirely behind authentication (admin, dashboard)
- SEO is not a concern, internal tools, employee portals
- You need maximum control over every architectural choice
- Deploying to static CDN with no Node.js server
- Embedding React into an existing non-React app (micro-frontend)
- React Native code sharing is planned (web + mobile same team)
- Electron desktop app (Node.js runtime, no server rendering needed)
- Learning React fundamentals without framework conventions
Frequently Asked Questions
The questions developers and tech leads ask most about Next.js vs React in 2026.
Building a Web Application or Headless CMS Site?
A2Z Dev Center builds headless WordPress + Next.js websites, content managed in WordPress Gutenberg, delivered via Next.js 15 with ISR and PPR for CDN-fast performance, SEO from day one, and HubSpot CRM integration for lead capture. At $40–$80/hr, headless WordPress + Next.js delivers enterprise-grade performance at accessible rates. We also build plain React + Vite for internal dashboards and admin tools where Next.js overhead is not justified.
Schedule a call
Talk to a subject-matter expert
Web development, SEO, or digital marketing — tell us about your project and we'll get back within one business day. No obligation.
- Free scope & strategy session
- A senior specialist, not a sales rep
- Your details stay confidential
