Concept lesson · explains an idea. Code is shown for reading, not run.
This course has built client-side React: a Vite app that runs in the browser. React can also be used inside a framework that adds a project structure, routing, data loading and rendering on the server. People often mix up “React” and “Next.js”. This lesson separates them.
React is a library; a framework is a bigger tool built on it
- React renders components and manages state. It does not decide how pages are routed, how data is loaded or where code runs.
- A React framework makes those decisions for you and adds a build system and (usually) a server part. Examples are Next.js, React Router in framework mode and TanStack Start.
At the time of writing, the official React documentation says that for new projects with production needs, you should start with a framework, and it recommends Next.js (App Router), React Router (framework mode) and Expo (for native apps). It lists TanStack Start and RedwoodSDK as other frameworks to watch. It describes building from scratch with a build tool such as Vite, which is what this course does, as a good fit for learning, toy projects and apps with unusual constraints. Read the current page (“Creating a React App” on react.dev), because recommendations change.
The rendering models
How and where the HTML of a page is produced is the main difference.
| Model | What happens | Typical tools |
|---|---|---|
| Client-side rendering (CSR) | The server sends an almost empty HTML page and JavaScript. The browser runs React and builds the page. | Vite + React (this course) |
| Server-side rendering (SSR) | The server runs React for each request and sends ready-made HTML. The browser then hydrates it: React attaches event handlers to the existing HTML. | Next.js, React Router framework mode, TanStack Start |
| Static site generation (SSG) | The HTML is generated once at build time and served as files. | The same frameworks |
| Incremental or on-demand regeneration | Static pages that are rebuilt after a period or on demand | Some frameworks |
| Server Components | Some components run only on the server (or at build time) and send their result, so their code never ships to the browser. Interactive parts stay client components. | Next.js App Router implements it today; other frameworks are adding support |
The same app can mix these per route.
Comparing the two worlds
| Client-side React with Vite | A React framework | |
|---|---|---|
| Project setup | You choose a router, data approach and structure | Conventions and structure are decided for you |
| Routing | A library you add (React Router) | Built in, often file-based |
| First page load | Browser downloads JavaScript, then renders | HTML arrives ready; JavaScript attaches afterwards |
| SEO and link previews | Depends on crawlers running JavaScript; weaker for content sites | Content is in the HTML; stronger for content sites |
| Data loading | In the browser, after render (effects, loaders, a library) | Can load on the server before sending the page |
| Hosting | Any static file host | SSR needs a Node.js or serverless runtime; static export is possible |
| Complexity | Simple mental model: everything runs in the browser | More concepts: server vs client code, hydration, caching |
| Secrets | Must never be in the code (Secret Keys) | Server code can safely use secrets, but the client/server boundary must be respected |
| Best for | Dashboards, tools, apps behind a login, internal apps, learning | Marketing sites, blogs, shops, documentation, anything public and search-driven |
What stays the same
Everything you learned in this course (components, JSX, props, state, hooks, forms, styling, testing, accessibility) applies unchanged in frameworks. They differ in how an app is started, routed, loaded and delivered. If you know React well, learning a framework mostly means learning its conventions.
Setup differences at a glance
# Client-side React with Vite (this course)
npm create vite@latest my-app -- --template react
# Frameworks (from the React documentation; check it for current commands)
npx create-next-app@latest
npx create-react-router@latestA Vite project has an index.html with a root element and a main.jsx. A framework project has a different layout (route files, a root layout, config), and runs a server in development.
Typical mistakes when mixing the two
- Following a Vite tutorial inside a framework, or the other way round. Check which one a tutorial uses before copying code.
- Using browser-only APIs (
window,localStorage,document) while rendering on the server. Use them in effects or event handlers, or opt the component out of server rendering. - Putting secrets in client code, thinking “it is a framework”. Only code that runs only on the server is safe for secrets.
- Hydration mismatches: the server HTML differs from what the browser renders first (for example because of
Date.now()orMath.random()during render). Keep rendering pure (Strict Mode). - Choosing SSR for an app that is behind a login and does not need search visibility: the complexity may not pay off.
How to choose
Ask these questions:
- Does the content need to rank in search or show rich link previews? Lean toward a framework with SSR or SSG.
- Is it an app behind a login (dashboard, admin tool, editor)? Client-side React is often enough.
- Does your team have a server or serverless platform? Frameworks with SSR need one; static hosting is the cheapest and simplest.
- How big and long-lived is the project? The more pages and the more people, the more a framework’s conventions help.
- Do you need Server Components, streaming or server functions? Choose a framework that supports them.
- Are you learning? Start with client-side React and Vite, which is what this course does; move to a framework when you meet a need that it solves.
A middle road
You can add a little server rendering or pre-rendering to a client app, or embed React widgets in a content site built with another tool, such as a WordPress theme or a static site generator. Not every project needs the full framework path. Pick the least complex option that satisfies your real requirements.
Where to go next
Read the documentation for the framework you choose, and follow its official tutorial. The React concepts you already know will make it much faster to learn. See also Your Next Steps.
Key points
- React is the library; Next.js and friends are frameworks built around it that add routing, data loading and server rendering.
- Client-side React suits apps and learning; frameworks suit public, search-driven sites and larger teams.
- Your React skills transfer fully; choose by SEO, hosting, team and complexity needs.