晨平安

岁岁平，岁岁安，岁岁平安

1191 字

6 分钟

服务端渲染 SSR 实战：Next.js 与 Nuxt.js 深度解析

2026-02-27

原创

SSR

/

Next.js

/

Nuxt.js

/

React

/

Vue

/

性能优化

服务端渲染 SSR 实战：Next.js 与 Nuxt.js 深度解析#

🌐 前言：服务端渲染（SSR）是解决 SPA 首屏加载慢、SEO 不友好的有效方案。Next.js 和 Nuxt.js 是目前最流行的 SSR 框架，这篇文章将深入讲解它们的原理和实战技巧。

一、为什么需要 SSR#

1.1 SPA 的问题#

首屏加载慢：

1
用户请求 -> 下载 HTML -> 下载 JS -> 执行 JS -> 渲染页面
2
（白屏时间 = 下载 + 执行 JS 的时间）

SEO 不友好：

搜索引擎爬虫可能无法执行 JavaScript
页面内容为空，影响收录和排名

1.2 SSR 的优势#

更快的首屏：

1
用户请求 -> 服务端渲染 -> 返回完整 HTML -> 展示页面
2
（用户可以立即看到内容）

更好的 SEO：

搜索引擎直接抓取渲染好的 HTML
内容完整，有利于排名

1.3 渲染模式对比#

模式	首屏	SEO	交互	适用场景
CSR	慢	差	好	后台管理系统
SSR	快	好	好	内容网站、电商
SSG	极快	好	一般	博客、文档站
ISR	快	好	好	新闻、大流量站点

二、Next.js 实战#

2.1 项目结构#

1
my-app/
2
├── app/                 # App Router (Next.js 13+)
3
│   ├── layout.tsx
4
│   ├── page.tsx
5
│   └── loading.tsx
6
├── pages/               # Pages Router (传统)
7
│   ├── index.tsx
8
│   └── api/
9
├── public/
10
├── components/
11
└── next.config.js

2.2 数据获取#

服务端组件（推荐）：

1
async function getData() {
2
  const res = await fetch('https://api.example.com/posts', {
3
    next: { revalidate: 60 } // ISR: 60秒重新验证
4
  });
5
  return res.json();
6
}
7

8
export default async function Page() {
9
  const posts = await getData();
10

11
  return (
12
    <main>
13
      <h1>博客文章</h1>
14
      {posts.map(post => (
15
        <article key={post.id}>
16
          <h2>{post.title}</h2>
17
          <p>{post.excerpt}</p>
18
        </article>
19
      ))}
20
    </main>
21
  );
22
}

客户端组件：

1
'use client';
2

3
import { useState, useEffect } from 'react';
4

5
export default function Counter() {
6
  const [count, setCount] = useState(0);
7

8
  useEffect(() => {
9
    // 客户端逻辑
10
  }, []);
11

12
  return (
13
    <button onClick={() => setCount(c => c + 1)}>
14
      Count: {count}
15
    </button>
16
  );
17
}

2.3 路由和导航#

1
export default function RootLayout({
2
  children
3
}: {
4
  children: React.ReactNode
5
}) {
6
  return (
7
    <html lang="zh">
8
      <body>
9
        <nav>
10
          <Link href="/">首页</Link>
11
          <Link href="/about">关于</Link>
12
        </nav>
13
        {children}
14
      </body>
15
    </html>
16
  );
17
}

2.4 API 路由#

1
import { NextResponse } from 'next/server';
2

3
export async function GET() {
4
  const users = await db.users.findMany();
5
  return NextResponse.json(users);
6
}
7

8
export async function POST(request: Request) {
9
  const body = await request.json();
10
  const user = await db.users.create(body);
11
  return NextResponse.json(user, { status: 201 });
12
}

2.5 中间件#

1
import { NextResponse } from 'next/server';
2
import type { NextRequest } from 'next/server';
3

4
export function middleware(request: NextRequest) {
5
  // 认证检查
6
  const token = request.cookies.get('token');
7

8
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
9
    return NextResponse.redirect(new URL('/login', request.url));
10
  }
11

12
  return NextResponse.next();
13
}
14

15
export const config = {
16
  matcher: ['/dashboard/:path*']
17
};

三、Nuxt.js 实战#

3.1 项目结构#

1
nuxt-app/
2
├── components/          # Vue 组件
3
├── composables/         # 组合式函数
4
├── layouts/             # 布局
5
├── middleware/          # 中间件
6
├── pages/               # 页面（自动路由）
7
├── public/              # 静态文件
8
├── server/              # 服务端代码
9
│   ├── api/             # API 路由
10
│   └── middleware/      # 服务端中间件
11
└── nuxt.config.ts

3.2 页面和数据获取#

1
<script setup>
2
// 服务端获取数据
3
const { data: posts } = await useFetch('/api/posts');
4

5
// 客户端获取数据
6
const { data: users } = await useFetch('/api/users', {
7
  server: false  // 只在客户端获取
8
});
9

10
// ISR
11
const { data: articles } = await useFetch('/api/articles', {
12
  key: 'articles',
13
  initialCache: false
14
});
15
</script>
16

17
<template>
18
  <div>
19
    <h1>文章列表</h1>
20
    <article v-for="post in posts" :key="post.id">
21
      <h2>{{ post.title }}</h2>
22
      <p>{{ post.excerpt }}</p>
23
    </article>
24
  </div>
25
</template>

3.3 服务端 API#

1
export default defineEventHandler(async (event) => {
2
  const posts = await prisma.post.findMany({
3
    orderBy: { createdAt: 'desc' }
4
  });
5

6
  return posts;
7
});
8

9
// server/api/posts.post.ts
10
export default defineEventHandler(async (event) => {
11
  const body = await readBody(event);
12

13
  const post = await prisma.post.create({
14
    data: body
15
  });
16

17
  return post;
18
});

3.4 组合式函数#

1
export const useAuth = () => {
2
  const user = useState('user', () => null);
3

4
  const login = async (credentials) => {
5
    const { data } = await useFetch('/api/auth/login', {
6
      method: 'POST',
7
      body: credentials
8
    });
9

10
    user.value = data.value;
11
  };
12

13
  const logout = async () => {
14
    await useFetch('/api/auth/logout', { method: 'POST' });
15
    user.value = null;
16
  };
17

18
  return {
19
    user,
20
    login,
21
    logout,
22
    isLoggedIn: computed(() => !!user.value)
23
  };
24
};

四、性能优化#

4.1 图片优化#

Next.js：

1
import Image from 'next/image';
2

3
export default function Gallery() {
4
  return (
5
    <Image
6
      src="/photo.jpg"
7
      alt="照片"
8
      width={800}
9
      height={600}
10
      priority  // 优先加载
11
      placeholder="blur"
12
      blurDataURL="data:image/jpeg;base64,..."
13
    />
14
  );
15
}

Nuxt.js：

1
<template>
2
  <NuxtImg
3
    src="/photo.jpg"
4
    alt="照片"
5
    width="800"
6
    height="600"
7
    loading="lazy"
8
    placeholder
9
  />
10
</template>

4.2 代码分割#

1
// Next.js 动态导入
2
import dynamic from 'next/dynamic';
3

4
const HeavyComponent = dynamic(
5
  () => import('../components/HeavyComponent'),
6
  { loading: () => <p>Loading...</p> }
7
);
8

9
// Nuxt.js 动态导入
10
const HeavyComponent = defineAsyncComponent(() =>
11
  import('~/components/HeavyComponent.vue')
12
);

4.3 缓存策略#

1
// Next.js 缓存配置
2
export async function getStaticProps() {
3
  const data = await fetchData();
4

5
  return {
6
    props: { data },
7
    revalidate: 60,  // ISR: 60秒重新生成
8
    notFound: !data
9
  };
10
}
11

12
// Nuxt.js 缓存
13
const { data } = await useFetch('/api/data', {
14
  key: 'unique-key',
15
  server: true,
16
  default: () => ({})
17
});

五、部署#

5.1 Vercel（推荐）#

1
# Next.js
2
npm i -g vercel
3
vercel
4

5
# Nuxt.js
6
npm i -g vercel
7
vercel

5.2 Node.js 服务器#

1
{
2
  "scripts": {
3
    "build": "next build",
4
    "start": "next start"
5
  }
6
}

5.3 Docker#

1
FROM node:18-alpine
2
WORKDIR /app
3
COPY package*.json ./
4
RUN npm ci
5
COPY . .
6
RUN npm run build
7
EXPOSE 3000
8
CMD ["npm", "start"]

六、总结#

Next.js vs Nuxt.js：

特性	Next.js	Nuxt.js
框架	React	Vue
路由	App Router / Pages	文件系统自动路由
数据获取	Server Components / getXProps	useFetch / 自动导入
生态	更大	活跃
学习曲线	中等	较低