前端常用框架服务器渲染（Server-Side Rendering，SSR）

1. 核心概念

• 定义：SSR 在服务器端执行前端框架（如React、Vue）的代码，生成包含动态内容的HTML页面，客户端接收后直接展示，再通过“注水”（Hydration）绑定交互逻辑。

• 对比：

  • 客户端渲染（CSR）：浏览器下载空HTML后，通过JavaScript动态渲染内容，首屏加载慢，SEO不友好。

  • 静态生成（SSG）：构建时生成静态HTML，适用于内容固定的场景（如博客），而SSR每次请求动态生成。

2. 核心流程

3. 优势

• 更快的首屏加载：用户立即看到内容，无需等待JS执行。

• SEO友好：搜索引擎爬虫直接解析HTML中的内容。

• 低端设备兼容性：减少客户端计算压力。

4. 挑战与缺点

• 服务器负载：每次请求需渲染页面，增加服务器压力。

• 开发复杂度：需处理服务端与客户端环境差异（如window对象不可用）。

• 注水失败风险：服务器与客户端渲染的DOM不一致会导致错误。

• TTI延迟：虽然首屏快，但可交互时间可能因JS加载而延迟。

5. 常用框架

• React：Next.js

• Vue：Nuxt.js

• Angular：Angular Universal

• 通用工具：SvelteKit、Gatsby（SSG为主）

6. 实现注意事项

• 数据获取：在服务器端使用API（如Next.js的getServerSideProps）预取数据。

• 代码同构（Isomorphic）：确保组件代码在服务端和客户端均可运行。

• 环境适配：避免直接操作DOM，使用useEffect或生命周期钩子区分环境。

• 缓存策略：对频繁请求的页面进行缓存，减轻服务器压力。

• 错误处理：服务器端渲染失败时需优雅降级（如回退到CSR）。

7. 优化策略

• 流式渲染：分块传输HTML，提升首字节时间（如React的renderToNodeStream）。

• 部分SSR：仅对关键页面使用SSR，其他用CSR或SSG。

• CDN缓存：结合CDN缓存静态资源或页面片段。

• 按需加载：客户端按需加载非关键JS代码。

8. 适用场景

• 内容密集型网站：新闻、博客、电商产品页（需SEO）。

• 动态数据页面：用户仪表盘（需实时数据但首屏要求高）。

• 兼顾性能与SEO的应用：如企业官网、营销页面。

9. 安全考虑

• XSS防护：服务器渲染时需对动态内容转义（如React自动转义dangerouslySetInnerHTML）。

• 避免敏感数据泄露：确保服务器端不暴露用户隐私数据。

一、Vue 项目实现 SSR（以 Nuxt.js 为例）

Nuxt.js 是 Vue 生态中专门为 SSR 设计的框架，开箱即用。

1. 创建 Nuxt 项目

npx create-nuxt-app my-ssr-app
# 选择SSR模式（Universal模式）

2. 目录结构

Nuxt 自动生成约定式路由和页面：

pages/
index.vue # 对应路由 /
about.vue # 对应路由 /about

3. 页面组件与数据获取

在页面组件中使用 asyncData 或 fetch 方法在服务器端获取数据：

写博客的时候这里没有找到vue后缀的代码区块。

<!– pages/index.vue –>
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>

<script>
export default {
async asyncData({ $axios }) {
// 服务器端获取数据（仅在首次加载时执行）
const posts = await $axios.get('https://api.example.com/posts');
return {
title: 'Server-Side Rendered Posts',
posts: posts.data
};
}
}
</script>

4. 部署与运行

• 开发模式：

  npm run dev

• 生产构建：

  npm run build
  npm run start

5. 关键配置

• nuxt.config.js：配置插件、中间件、构建选项等。

• 使用 @nuxtjs/axios 模块简化 API 请求。

二、React 项目实现 SSR（以 Next.js 为例）

Next.js 是 React 生态中支持 SSR 的主流框架。

1. 创建 Next 项目

npx create-next-app my-ssr-app

2. 目录结构

pages/
index.js # 对应路由 /
about.js # 对应路由 /about

3. 页面组件与数据获取

使用 getServerSideProps 在服务器端获取数据：

写博客的时候这里没有找到jsx后缀的代码区块。

// pages/index.js
export default function HomePage({ posts }) {
return (
<div>
<h1>Server-Side Rendered Posts</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}

// 服务器端数据获取（每次请求时执行）
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts }
};
}

4. 部署与运行

• 开发模式：

  npm run dev

• 生产构建：

  npm run build
  npm run start

5. 关键配置

• next.config.js：自定义 Webpack、路由、环境变量等。

• 使用 next/router 处理客户端路由。

三、Vue vs React 的 SSR 实现对比

四、注意事项

通用注意点

Vue 专属注意点

• 使用 nuxtServerInit 在 Vuex Store 中初始化服务端数据。

• 通过 <client-only> 标签包裹仅需在客户端运行的组件。

React 专属注意点

• 在 useEffect 中处理客户端逻辑（如事件绑定）。

• 使用 dynamic 导入实现组件懒加载：

  import dynamic from 'next/dynamic';
  const ClientSideComponent = dynamic(() => import('../components/ClientComponent'), { ssr: false });

五、示例总结

• Vue (Nuxt.js)：适合快速构建内容驱动型应用（如博客、电商），依赖 Nuxt 的约定式配置。

• React (Next.js)：适合复杂交互与动态数据结合的场景（如用户仪表盘），灵活性更高。

通过框架（Nuxt/Next）的封装，开发者无需手动配置 Webpack 和服务端渲染逻辑，只需专注业务代码即可实现高性能 SSR。