前端同学写官网、内容站、AI 产品落地页，最怕什么？——页面做得再漂亮，百度 Google 搜不到，流量为零。

SPA 体验确实好，但爬虫看到的是空 #root；Next.js 背靠 Vercel，一个框架同时搞定页面和 API。把 React 组件的渲染从浏览器搬到了服务端。这篇文章带你从零搞懂 Next.js 全栈与 SEO 的根本原因，并用一个待办事项 Demo 跑通 App Router、Server Component、API Routes。

一、SPA 的体验与 SEO 的代价

先聊聊我们熟悉的 SPA。不过，

SPA 的好处很明显：

• 交互流畅。组件在前端挂载，用 useEffect 异步请求数据，不需要刷新页面；
• 前端路由切换快，体验接近原生 App；
• 一套 HTML + JS 跑在 WebView 里就能覆盖 iOS / Android 两端。说起来，

你会发现。现在很多移动端 App 里 % 的页面都是 SPA 做的。为什么，因为 App 不需要 SEO。使用者是从应用商店下载的，不是从百度搜进来的。但换成官网、博客、内容站、AI 产品介绍页，情况就完全不同了——这些页面要靠搜索引擎吃饭。

SPA 的短板非常致命： 爬虫通过 URL 抓取页面时拿到的是这样的 HTML：

#root 是空的，真正的内容要等 JS 下载、执行、异步请求数据后才渲染出来。不过，搜索引擎爬虫可没耐心等你异步加载完。所以你的页面在搜索结果里就是一片空白。

使用者痛点

• 页面无法被收录导致流量低迷
• 内容更新频繁却无法即时被搜索引擎识别和排名提高
• 无法通过自然流量获得精准访客，只能依赖付费广告或社交媒体转发

二、CSR 与 SSR 的本质：组件到底在哪里渲染？

概念区分

• C S r i n t e n t R e n ding" : 组件在浏览器里挂载渲染。使用者看到页面前，浏览器要下载 JS、执行 React、请求数据。接下来才渲染到 #root.
• S S r&e;说起来， : 组件在服务端用 Node 跑一遍。把 JSX + 数据编译成 HTML 字符串，直接返回完整页面。爬虫拿到就能解析，

服务器返回的数据格式对比：

SSR的优缺点：

• 优点：
  • 首屏快，SEO 友好。不需要额外水合即可展示完整 UI。支持传统安装部署方式或无安装部署。按理说，
    ​ ​ ​ ​ ​ ​ ​

     ​ ​
    ​ ​
    ​ ​
    ​ ​
    ​ ​
    ​ ​
    ​ ​
    ​ ​
    

    ​ ​ ​ ​ ​
    ​
    ​ ​​ ​ ​ ​​​​​​ ​​ ​​​ ​​​ ​​ ​​ ​ ​ ​ ​ ​ 。
    注：代码示例已做简化处理，请根据实际项目需求自行调整。
    • Csr 优点：
      • 交互流畅，切换页面不刷新；接近原生 App，不过，可利用现代前端技术栈实现复杂交互。单页内无需多次请求服务器配置资源。⁠ • • **缺点**这方面，
        • 首屏慢； SEO 差，水合才能激活事件和状态管理是必须的。复杂度高，需要更多测试和调试工具支持。‑‑‑‑‑–––––––––– `` —–

          比喻这方面。

          • SSR餐厅把煮好的水饺端给你，你直接吃。
          • CSR餐厅给你面团和馅，你自己包、自己煮。说起来，

          场景建议这方面。

          • 官网 / 博客 / 内容站 → SSR 为主。
          • 后台管理 / 单页式 SaaS → CSR + SSR 混合。

          三、Next.js 项目结构与约定式路由

          ① 创建项目

          npx create-next-app@latest

          选择默认配置即可，你会得到 TypeScript + Tailwind CSS + ESLint 一套全家桶。怎么说呢，

          ② 文件即路由

          Next.js 的主要思想是"约定大于配置"。所以只需在 `app/` 下建文件夹/文件即可自动生成对应路由。

          后台设置 `/dashboard/settings`

          方法结构 对应 URL	说明
          app/page.tsx	首页 `/`
          app/about/page.tsx	关于 `/about`
          app/dashboard/page.tsx	后台 `/dashboard`
          app/dashboard/settings/page.tsx

          嵌套路由通过文件夹实现；布局文件 layout.tsx 控制公共部分。

          全局布局示例 : ts import type { Metadata } from \"next\";import Link from \"next/link\";import \"./globals.css\";export const metadata: Metadata = { 至于title。\"我的全栈应用\",description: \"一个 Next.js 全栈项目，SEO 友好\",};export default function RootLayout { return;}\`\`\`\ 注：上述 `` 标签会自动写入 ` ` 中，以便搜索引擎读取。### 子布局示例 ts export default function DashboardLayout { return;\}\`\`\` 这样 `/dashboard` 与 `/dashboard/settings` 都会先经过全局布局。再经过后台布局，再渲染具体页面。--- #### 小贴士： * **不要忘记 `metadata`** — 每个 `layout.tsx` 或 `page.tsx` 都可以导出 `metadata`,提高 SEO。说起来，* **文件程序即路由器** — 越深层级对应越深层方法。---

          四、服务端组件与客户端组件水合之道

          ① 默认都是服务端组件

          `App Router` 下没有 `'use client'` 声明的组件默认在服务器渲染。可以直接访问数据库或文件程序，接下来输出纯粹的 HTML。说起来，

          • Csr 能否使用 `useState`。`useEffect`,浏览器事件？话说回来，否 —— 服务端无 DOM 环境。
          • Ssr 可以访问后端资源，并直接将结果嵌入 HTML。
            这正是为什么 `