从0死磕全栈之使用 Next.js 构建高性能单页应用（SPA）

Next.js 不仅是一个强大的服务端渲染（SSR）和静态站点生成（SSG）框架，它同样非常适合构建现代单页应用（Single-Page Applications, SPA）。通过结合 React 的最新特性与 Next.js 的架构优势，开发者可以在享受 SPA 交互体验的同时，获得更快的首屏加载速度、更优的 SEO 支持以及渐进增强的服务端能力。

本文将深入探讨如何使用 Next.js 构建 SPA，并介绍其相较于传统 SPA 的优势与最佳实践。

什么是单页应用（SPA）？

在传统 Web 应用中，每次导航都会触发一次完整的页面刷新。而 SPA 则通过以下方式改变这一行为：

客户端渲染（CSR） ：应用由一个 HTML 文件（如 index.html）提供，所有路由跳转、页面更新和数据获取均由浏览器中的 JavaScript 处理。
无整页刷新：用户在不同"页面"间切换时，仅更新 DOM 的部分内容，体验更流畅。

然而，传统 SPA 也存在一些问题：

初始加载需下载大量 JavaScript，导致首屏交互延迟较长。
数据获取常形成"瀑布流"（waterfall），影响性能。
SEO 友好性较差（除非使用额外的预渲染方案）。

Next.js 正是为解决这些问题而生。

为什么选择 Next.js 构建 SPA？

Next.js 在保留 SPA 优点的同时，提供了以下关键优势：

✅ 自动代码分割（Code Splitting）

Next.js 会为每个路由生成独立的 JavaScript 包，用户只加载当前页面所需的代码，显著减少初始 bundle 体积。

✅ 智能预加载（Prefetching）

通过 <Link> 组件，Next.js 会在用户悬停或即将访问某路由时自动预加载其资源，实现近乎瞬时的页面切换体验。

✅ 渐进增强的服务端能力

你可以从一个纯客户端 SPA 开始，随着项目演进，逐步引入：

React Server Components（RSC）
Server Actions
流式 SSR（Streaming SSR）
静态生成（SSG）

这意味着你无需在项目初期就决定"全 CSR"还是"全 SSR"，而是按需演进。

✅ 更好的数据加载策略

Next.js 支持在服务端提前发起数据请求，避免客户端瀑布式请求，提升性能。

实战：构建一个 Next.js SPA

1. 基础结构：纯客户端路由

在 app/ 目录下，所有组件默认为 Server Components。若要构建 SPA，只需将页面标记为 Client Component：

tsx 复制代码

// app/page.tsx
'use client'

import { useState } from 'react'
import Link from 'next/link'

export default function HomePage() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Next.js SPA 示例</h1>
      <p>计数器: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <br />
      <Link href="/profile">前往个人资料页</Link>
    </div>
  )
}

tsx 复制代码

// app/profile/page.tsx
'use client'

export default function ProfilePage() {
  return (
    <div>
      <h2>个人资料</h2>
      <p>这是一个纯客户端页面。</p>
    </div>
  )
}

这样，整个应用就具备了 SPA 的行为：无整页刷新、状态保留在客户端。

2. 优化数据获取：使用 `use()` 与 Context

Next.js 推荐将数据获取"提升"到布局（Layout）中，并通过 Promise 传递给客户端组件，利用 React 18+ 的 use Hook 解包。

步骤一：在根布局中发起服务端请求（不 await）

tsx 复制代码

// app/layout.tsx
import { UserProvider } from './user-provider'
import { getUser } from './lib/user' // 服务端函数

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const userPromise = getUser() // 注意：不 await！

  return (
    <html lang="en">
      <body>
        <UserProvider userPromise={userPromise}>
          {children}
        </UserProvider>
      </body>
    </html>
  )
}

步骤二：创建 Context Provider（客户端）

tsx 复制代码

// app/user-provider.tsx
'use client'

import { createContext, useContext } from 'react'

const UserContext = createContext<Promise<any> | null>(null)

export function UserProvider({
  children,
  userPromise,
}: {
  children: React.ReactNode
  userPromise: Promise<any>
}) {
  return (
    <UserContext.Provider value={userPromise}>
      {children}
    </UserContext.Provider>
  )
}

export function useUser() {
  const context = useContext(UserContext)
  if (!context) throw new Error('useUser must be used within UserProvider')
  return context
}

步骤三：在客户端组件中消费数据

tsx 复制代码

// app/profile/page.tsx
'use client'

import { use } from 'react'
import { useUser } from '../user-provider'

export default function Profile() {
  const userPromise = useUser()
  const user = use(userPromise) // 自动 suspend 直到数据就绪

  return <div>欢迎，{user.name}！</div>
}

💡 这种模式实现了 流式渲染（Streaming） + 部分水合（Partial Hydration）：HTML 可在数据加载完成前返回，用户看到骨架屏，JavaScript 加载后自动填充内容。

3. 与 SWR 集成：渐进式数据获取

如果你已在使用 SWR，Next.js 也提供了无缝集成方案。

在布局中提供 fallback 数据

tsx 复制代码

// app/layout.tsx
import { SWRConfig } from 'swr'
import { getUser } from './lib/user'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <SWRConfig
      value={{
        fallback: {
          '/api/user': getUser(), // 服务端执行，安全访问 DB/cookies
        },
      }}
    >
      {children}
    </SWRConfig>
  )
}

客户端组件保持原有写法

tsx 复制代码

// app/profile/page.tsx
'use client'

import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function Profile() {
  const { data } = useSWR('/api/user', fetcher)
  // data 立即可用，无需 loading 状态判断
  return <div>欢迎，{data?.name}！</div>
}

✅ 优势：

首屏数据已内联在 HTML 中，无需额外请求。

后续交互（如轮询、revalidate）仍由 SWR 在客户端处理，保持 SPA 行为。

总结

Next.js 并非仅适用于 SSR 或 SSG 项目，它同样是一个构建高性能 SPA 的理想选择。通过以下能力，Next.js 能显著提升传统 SPA 的体验：

传统 SPA 问题	Next.js 解决方案
大体积 JS bundle	自动代码分割 + 按需加载
首屏白屏时间长	流式 SSR + 部分水合
数据瀑布流	服务端提前发起请求
无法 SEO	可选 SSR/SSG 渐进增强
路由跳转慢	`<Link>` 自动预加载

无论你是从零开始构建 SPA，还是希望将现有 React SPA 迁移到更现代的架构，Next.js 都提供了平滑的路径和强大的工具链。

🚀 建议：从纯客户端 SPA 开始，随着业务复杂度提升，逐步引入服务端组件、Server Actions 等特性，实现"渐进式现代化"。

从0死磕全栈之使用 Next.js 构建高性能单页应用（SPA）

什么是单页应用（SPA）？

为什么选择 Next.js 构建 SPA？

✅ 自动代码分割（Code Splitting）

✅ 智能预加载（Prefetching）

✅ 渐进增强的服务端能力

✅ 更好的数据加载策略

实战：构建一个 Next.js SPA

1. 基础结构：纯客户端路由

2. 优化数据获取：使用 use() 与 Context

步骤一：在根布局中发起服务端请求（不 await）

步骤二：创建 Context Provider（客户端）

步骤三：在客户端组件中消费数据

3. 与 SWR 集成：渐进式数据获取

在布局中提供 fallback 数据

客户端组件保持原有写法

总结

2. 优化数据获取：使用 `use()` 与 Context