什么是同构代码？编写同构代码要注意什么？

简化版

同构代码是同一套代码既能在服务端运行，也能在客户端运行。编写时要注意运行环境差异：服务端没有 window、document、localStorage，客户端没有 Node 私有能力。浏览器专属逻辑应放到客户端生命周期中执行。

同构应用中，组件可能在服务端渲染一次，又在客户端水合一次。

注意点：

同构代码要求开发者明确每段代码运行在哪里。

同构不是“完全一样的环境”，而是“一套业务代码尽量复用在两端”。服务端负责生成 HTML，客户端负责接管交互。

组件、路由、数据模型可以共享，但运行环境差异必须处理。

服务端是 Node 或边缘运行时，没有浏览器 DOM。客户端是浏览器，没有 Node 的文件系统和服务端私密环境变量。

因此这类代码会在 SSR 中报错：

const width = window.innerWidth

因为服务端没有 window。

浏览器 API 放到客户端生命周期中，例如 mounted、useEffect。

需要判断环境时，可以使用框架提供的运行环境变量，或判断 typeof window !== 'undefined'。

请求相关逻辑要注意服务端转发 Cookie、Header，客户端使用浏览器相对路径或公开 API 地址。

面试官可能问：“为什么不能把用户信息放模块全局变量？”

SSR 服务是多请求共享进程。模块全局变量也会被多个用户共享，可能造成数据串号。用户信息必须放请求上下文中。

工程中同构代码最重要的习惯是先问一句：这段代码会不会在服务端执行？

服务端运行时也不只有 Node：Node 可能有文件系统和长进程，Edge runtime 常限制原生模块、TCP 和执行时长；浏览器又有 DOM、Storage 和用户权限 API。

能力	浏览器	Node SSR	Edge runtime
DOM/window	有	无	无
文件系统	无	视部署可用	通常不可用或受限
Web 标准 fetch	有	现代版本有	通常有
长生命周期全局状态	页面生命周期	进程可能复用	实例可能频繁启停
服务端 secret	不应有	可有	可有但由平台管理

因此库设计应注入 storage、fetch、clock 等能力，而不是内部到处判断 window。纯函数接收参数最容易复用，平台适配放在边界层。

同构不是让每行代码在所有环境都跑，而是共享纯业务核心，并把平台副作用隔离成明确适配器。

模块顶层代码在 import 时就执行。即使函数内部判断了客户端，第三方包在顶层访问 document 仍会让 SSR 导入阶段崩溃；此类包要放客户端入口动态加载，或选择真正支持 SSR 的版本。

shared/core：校验、格式化、领域计算（无平台副作用）
server adapter：Cookie、数据库、secret、文件系统
client adapter：DOM、Storage、浏览器事件

模块单例在 100 个并发 SSR 请求间共享。如果把 currentUser 存进去，后写入的请求可能污染先请求；每次请求创建 context/store，并只把明确公共、无用户维度的数据放跨请求缓存。

构建时检查客户端 bundle，确认服务端环境变量和依赖没有被静态引用带入。变量名不带“public”不自动安全，是否泄露取决于框架暴露规则、代码依赖图和最终产物。