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

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

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 } };
}

同构数据获取必须区分环境

这是最容易出错的地方。服务端没有 fetch 的 polyfill（Node.js 18+ 原生支持，但旧版本需 node-fetch），而浏览器端不能用 fs 读配置。常见做法：

• 将 API 调用封装进可复用的函数，内部根据环境选择适配器（global.fetch vs require('node-fetch')）
• 避免在组件顶层 fetch，统一由框架的数据函数（如 getServerSideProps、loader）控制时机
• 服务端获取的数据必须可序列化（不能传 Date、Map、function），否则 JSON 序列化会丢失
• 客户端 hydration 后首次 useEffect 中可补全非关键数据（如用户偏好、实时状态），避免阻塞首屏

真正麻烦的从来不是“怎么渲染”，而是“数据在哪取、怎么传、怎么不重复取”。环境判断漏掉一处，就可能让服务端 crash 或客户端白屏。

今天关于《JavaScript服务端渲染与同构应用教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！