SSR on acye's blog

SSR 与 Mock 的简单实现

Fri, 11 Sep 2026 10:00:00 +0800

这篇把 SSR 和 Mock 两个场景动手做掉。它们同样是"一个 Node 服务"就能讲清楚的事。

一、SSR:服务端渲染

SSR 是什么

SSR(Server-Side Rendering)指页面 HTML 由服务端生成,而不是浏览器里用 JS 现拼。

	CSR(客户端渲染)	SSR(服务端渲染)
HTML 来源	浏览器执行 JS 后生成	服务端直接返回完整 HTML
SEO	爬虫拿到空壳,不友好	爬虫直接看到内容
首屏速度	先下 JS 再渲染,慢	HTML 直达,首屏快
交互	天然支持	需要"水合(hydration)“再接管

典型场景:内容型网站(博客、文档、电商详情页)必须 SSR,因为 SEO 和首屏是命根子。

手写一个最简 SSR

思路很简单:服务端把数据塞进模板,渲染成 HTML 字符串,返回给浏览器。

装一下环境

`1`	`npm install express`

代码

// server.js
const express = require('express');
const app = express();

// 模拟从数据库取文章
const posts = [
  { id: 1, title: 'Node 与开发', views: 1024 },
  { id: 2, title: 'Node 基础', views: 2048 },
];

// 模板函数:把数据渲染成 HTML(生产中用模板引擎或组件渲染)
function renderPost(post) {
  return `
<!DOCTYPE html>
<html>
<head><title>${post.title}</title></head>
<body>
  <h1>${post.title}</h1>
  <p>阅读量:${post.views}</p>
</body>
</html>`;
}

app.get('/post/:id', (req, res) => {
  const post = posts.find((p) => p.id === Number(req.params.id));
  if (!post) return res.status(404).send('Not Found');
  res.send(renderPost(post)); // 返回完整 HTML
});

app.listen(3000, () => console.log('SSR on http://localhost:3000'));

浏览器打开 http://localhost:3000/post/1,右键查看源代码,能看到完整的 <h1>Node 与开发</h1>——这就是 SSR 和 CSR 最直观的区别。

从手写 SSR 到 Next.js / Nuxt

上面手写版返回的是死 HTML:能看、能被爬虫抓,但按钮点了没反应,跳转会整页刷新。服务端只吐了字符串,浏览器里没有 React / Vue 去绑事件。

Next.js / Nuxt 做的是另一件事:首屏仍走 SSR,JS 下载完后再"水合(hydration)“接管。

水合就是:浏览器先立刻画出服务端 HTML(首屏快、SEO 不丢),再把事件和状态挂到已经存在的 DOM 上,页面从"能看"变成"能点”。这就是开头表格里那句「需要水合再接管」。

flowchart LR
  req[请求页面] --> ssr[服务端渲染HTML]
  ssr --> show[浏览器立刻能看]
  show --> js[下载JS]
  js --> hydrate[水合接管]
  hydrate --> spa[可点击可跳转]

	纯 SSR(手写模板)	Next.js / Nuxt
HTML	服务端生成	服务端生成
交互	没有,或自己写原生 JS	水合后变成可交互页面
跳转	每次整页刷新	水合后走客户端路由,不再整页刷
组件	字符串拼接	组件化,可复用
数据	自己塞进模板	框架在服务端取好再注入

生产里几乎不会手写模板,而是用框架:

Next.js(React):Pages Router 用 getServerSideProps,每次请求都在服务端取数再渲染;App Router 用 Server Components,数据默认在服务端取,客户端只收到必要的 JS
Nuxt(Vue):useAsyncData / useFetch,服务端执行一次,水合时把结果复用给客户端,不会再打一遍接口

// Next.js Pages Router:数据在服务端取好,组件直接渲染
export default function Post({ post }) {
  return <h1>{post.title}</h1>;
}

export async function getServerSideProps({ params }) {
  const post = await db.getPost(params.id);
  return { props: { post } }; // 服务端渲染时注入
}

<!-- Nuxt:useFetch 在服务端跑,水合时直接复用,客户端不重复请求 -->
<script setup>
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)
</script>

<template>
  <h1>{{ post.title }}</h1>
</template>

理解手写版再上框架,你就明白框架帮你解决了什么:模板引擎、水合、路由、数据注入、缓存。

二、Mock:接口模拟

Mock 是什么

Mock 是在后端接口没写好(或没部署)时,用 Node 起一个假接口服务,返回模拟数据。前端开发、联调、测试全靠它。

典型场景:

后端排期晚于前端,前端要先行开发
接口字段还没定稿,先用 Mock 定结构
自动化测试不想依赖真实服务

手写一个最简 Mock 服务

// mock-server.js
const express = require('express');
const app = express();

// 内存数据源:模拟数据库
const db = {
  users: [
    { id: 1, name: 'acye', avatar: 'https://example.com/a.png' },
    { id: 2, name: 'nobody', avatar: 'https://example.com/b.png' },
  ],
  articles: [
    { id: 1, title: 'SSR 与 Mock', authorId: 1, content: '...' },
  ],
};

// 接口路径、返回结构尽量与真实后端保持一致
app.get('/api/users/:id', (req, res) => {
  const user = db.users.find((u) => u.id === Number(req.params.id));
  if (!user) return res.status(404).json({ code: 404, message: 'user not found' });
  res.json({ code: 0, data: user });
});

app.get('/api/articles', (req, res) => {
  const list = db.articles.map((a) => ({ ...a, author: db.users.find((u) => u.id === a.authorId) }));
  res.json({ code: 0, data: list });
});

// 模拟网络延迟,更贴近真实
app.use((req, res, next) => setTimeout(next, 200));

app.listen(3001, () => console.log('Mock on http://localhost:3001'));

前端联调时,把接口地址指到 http://localhost:3001,等真实后端就绪后只改一行 baseURL:

1
2
3

// api.js
const BASE = import.meta.env.DEV ? 'http://localhost:3001' : '/api';
export const getUser = (id) => fetch(`${BASE}/users/${id}`).then((r) => r.json());

Mock 的进阶玩法

方案	适用场景
手写 Express 返回假数据	简单项目、学习(上面这个)
JSON Server(一个 JSON 文件生成 REST API)	原型验证、快速出假数据
MSW(Mock Service Worker)	前端测试里拦截真实请求
中间件式 Mock(按环境开关)	大项目,随构建环境切换

大项目常用"中间件式”:同一个服务,NODE_ENV=development 时走 Mock 数据,生产环境直接转发真实后端:

app.use('/api', (req, res) => {
  if (process.env.USE_MOCK === 'true') {
    return mockHandler(req, res); // 返回假数据
  }
  // 否则代理到真实后端
  proxy(req, res, { target: 'http://api.internal' });
});

总结

SSR:服务端生成 HTML,解决 SEO 和首屏。手写版 = 数据 + 模板 → 完整 HTML;生产用 Next.js / Nuxt
Mock:用 Node 起假接口,让前端先行开发。核心是接口结构对齐真实后端 + 环境可切换
两者都是"一个 Node 服务",是 BFF 之外,前端最常用的两个自建服务场景

Node 与开发:前端为什么要学 Node.js

Fri, 11 Sep 2026 09:00:00 +0800

很多前端同学对 Node.js 的第一反应是"那是后端的东西,跟我没关系"。但只要你用过 npm install、跑过 vite dev、配过 webpack,你其实已经在用 Node 了——只是没意识到。

这篇文章先解决"为什么学"的问题:Node 到底是什么、它和你每天的工作有什么关系。

Node.js 是什么:V8 上的 JS 运行时

一句话:Node.js 是让 JavaScript 脱离浏览器、在服务器上运行的运行时环境。

拆开看两个关键词:

关键词	含义
V8	谷歌开发的 JS 引擎,Chrome 里跑 JS 的就是它。Node 把它单独拿了出来
运行时(Runtime)	提供 JS 语法之外的能力:读文件、开网络服务、操作进程……

所以同一个 JS 语言,在浏览器里能用 document、window,在 Node 里能用 fs、http、process。语言没变,变的是平台给的"工具包"。

// 浏览器环境
console.log(window.innerWidth);

// Node 环境
const fs = require('fs');
const files = fs.readdirSync('/tmp');
console.log(files);

Webpack / Vite / npm 都跑在 Node 上

这是前端学 Node 最现实的理由:你每天都在用的工具链,本身就是 Node 程序。

npm install、pnpm install —— 包管理器是 Node 写的
vite dev、webpack build —— 构建工具跑在 Node 进程里
eslint、prettier、husky —— 代码检查、格式化、git 钩子全是 Node CLI
你的 package.json 里的 scripts,每个命令都是一个 Node 进程

这意味着:不懂 Node,你就只能"会用"这些工具,不能"改"它们。

举个例子,项目里常见的构建脚本:

// scripts/build.js —— 这也是 Node 代码
const { execSync } = require('child_process');
const env = process.env.NODE_ENV || 'production';

execSync(`vite build --mode ${env}`, { stdio: 'inherit' });
console.log('构建完成');

一旦你认识 Node 的 child_process、path、fs,你就能看懂、能修改、能自己写这类脚本。这就是从"配工具的人"变成"造工具的人"的分水岭。

BFF、SSR、Mock 都靠它

这三个词是前端进阶路上绕不开的,而它们的共同点是:都需要一个 Node 服务。

概念	它解决什么	为什么需要 Node
BFF(Backend For Frontend)	后端接口太"碎",前端要聚合、裁剪、适配	在 Node 层写一个中间服务,帮前端拼数据
SSR(服务端渲染)	SEO 差、首屏慢	用 Node 在服务端把 HTML 渲染好再发给浏览器
Mock(接口模拟)	后端没写好,前端没法联调	用 Node 起一个假接口服务,返回模拟数据

以后端接口为例,一个页面可能需要同时请求用户信息、订单列表、优惠券三个接口,再自己拼装。有了 BFF,前端只调一个接口,聚合逻辑放在 Node 层:

// BFF 伪代码:把三个接口聚合成一个
app.get('/api/page/home', async (req, res) => {
  const [user, orders, coupons] = await Promise.all([
    fetch('http://api.internal/user'),
    fetch('http://api.internal/orders'),
    fetch('http://api.internal/coupons'),
  ]);
  res.json({ user, orders, coupons });
});

通往前端全栈的桥

对前端来说,Node 是成本最低的全栈入口:

不需要学第二门语言,还是 JavaScript/TypeScript
心智模型跟浏览器端 JS 高度重合(异步、事件、模块)
学了就能立刻用回前端工作:写脚本、做构建、搭 Mock、配 CI

前端 → Node 脚本 → Node 服务 → 全栈,是一条平滑的渐进路线,而不是"从零转行后端"。

总结

Node 是 V8 上的 JS 运行时,让 JS 走出浏览器
前端工具链(Webpack/Vite/npm)本质都是 Node 程序,懂 Node 才能改工具
BFF、SSR、Mock 是前端进阶的三大场景,都建立在 Node 之上
它是前端转全栈的桥,而不是一条分岔路