Meta-Framework Comparison

Raw Vite + React:
  Routing: configure React Router yourself
  SSR: write your own server.js
  Data fetching: write your own loader
  File-based routing: not supported
  Optimization: configure yourself

Next.js = Vite + React + all of the above out of the box

// Next.js App Router routing structure
app/
  layout.tsx        ← Root layout (Server Component)
  page.tsx          ← / route (Server Component)
  blog/
    page.tsx        ← /blog
    [slug]/
      page.tsx      ← /blog/:slug

// Server Component: direct async/await, no useEffect needed
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await db.post.findUnique({ where: { slug: params.slug } })
  return <article>{post.content}</article>
}

// Nuxt routing
pages/
  index.vue          ← /
  blog/
    index.vue        ← /blog
    [slug].vue       ← /blog/:slug

// Nuxt data fetching
const { data: post } = await useFetch(`/api/posts/${slug}`)

// routes/blog/[slug]/
+page.svelte       ← Frontend component
+page.server.ts    ← Server-only data loading (not bundled into client)
+page.ts           ← Isomorphic data loading

// +page.server.ts
export async function load({ params }) {
  const post = await db.post.findUnique({ where: { slug: params.slug } })
  return { post }
}

import adapter from "@sveltejs/adapter-cloudflare"
// or
import adapter from "@sveltejs/adapter-node"
// or
import adapter from "@sveltejs/adapter-vercel"

Team familiar with React?
  ├── Yes → Need RSC or Edge features?
  │         ├── Yes → Next.js (App Router)
  │         └── No  → React Router v7 or Vite + React
  │
Team familiar with Vue?
  └── Yes → Nuxt 3
         (best compatibility with Vite.js and multi-platform deployment)

Svelte enthusiasts → SvelteKit

Chasing maximum performance → SolidStart

Full control, no black boxes → Assemble your own with Vite (what this site does!)

// Design a scenario: a company needs to build an internal knowledge base system
// Requirements:
// - Documentation written in Markdown
// - Full-text search support
// - Employees must log in to view content
// - Deployed on the company's own servers

// Question 1: Does this scenario call for SSR or SSG? Why?
// Question 2: Which meta-framework should you choose (assuming the team knows React)?
// Question 3: If you did not use a meta-framework and built it yourself (like vite-mastery does),
//             what additional problems would you need to solve?