当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript服务端渲染与同构教程

JavaScript服务端渲染与同构教程

2026-02-12 20:12:37 0浏览收藏

本篇文章给大家分享《JavaScript实现服务端渲染与同构应用教程》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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();
res.send(`
${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 {data.title};
}

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