首页 > 文章 > 前端

JavaScript服务端渲染与同构应用教程

时间：2026-02-10 14:46:33 362浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript实现服务端渲染与同构应用教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

JavaScript 浏览器环境无法实现 SSR，因其缺失 fs、http、真实 DOM 等服务端能力；真正 SSR 需 Node.js + 框架（如 Next.js）或 ReactDOMServer API。

javascript如何实现服务端渲染与同构应用【教程】

JavaScript 本身不能直接实现服务端渲染（SSR）——它需要运行环境，而浏览器里没有 fs、http 或真实 DOM；真正能做 SSR 的是 Node.js + 框架（如 Next.js、Nuxt、Remix），或手写 ReactDOMServer.renderToString / renderToNodeStream 等 API。

为什么浏览器 JS 无法做 SSR

服务端渲染的本质是在服务器上执行前端代码，生成 HTML 字符串返回给客户端。浏览器环境缺失以下关键能力：

无法读取本地文件（fs.readFileSync 不可用）
没有真正的 document 对象（document.createElement 是模拟的，不能用于生成初始 HTML）
无法监听 HTTP 请求（http.createServer 是 Node.js 特有）
模块系统不同（ESM/CJS 差异、__dirname、路径解析等）

React 同构应用的关键：`ReactDOMServer` + 可水合的 HTML

同构（isomorphic）指同一份组件代码既能在服务端执行，也能在浏览器运行。核心在于：

服务端用 ReactDOMServer.renderToString 渲染为字符串，注入到模板中
客户端用 ReactDOM.hydrateRoot（React 18+）接管已存在的 DOM，而非重新渲染
确保服务端与客户端渲染结果一致，否则会触发警告甚至丢弃 DOM（hydration mismatch）
避免在组件顶层调用浏览器专属 API（如 window.location、localStorage），需包裹在 useEffect 或判断 typeof window !== 'undefined'

示例片段（服务端）：

import { renderToString } from 'react-dom/server';
import App from './App.js';

const html = renderToString(<App />);
res.send(`<!DOCTYPE html>
<html><body><div id="root">${html}</div></body></html>`);

Next.js 是最简可行的 SSR 落地方式

自己搭 Express + ReactDOMServer 容易踩坑（数据预取、样式提取、错误边界、流式响应、缓存头），Next.js 封装了这些细节：

页面文件导出 getServerSideProps 即启用 SSR，函数在服务端运行，返回的 props 会序列化后注入页面
getStaticProps 用于静态生成（SSG），适合内容不常变的页面
自动处理 CSS-in-JS 提取（如 Emotion、Styled Components）、标签同步、script 注入策略
开发时热更新仍有效，但需注意 getServerSideProps 中的逻辑不会被 HMR 重载

一个典型页面：

export default function Home({ data }) {
  return <h1>{data.title}</h1>;
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}