Mobx configure对象与enableStaticRendering的最佳代码放置位置咨询

针对你的React/Preact+Express+TypeScript+Mobx SSR项目，这两个配置的放置位置需要区分服务端和客户端场景，具体如下：

1. enableStaticRendering：仅服务端入口/SSR处理文件 #

这个API的作用是告诉Mobx在服务端渲染时不要追踪observable的变化（避免内存泄漏，因为服务端请求是无状态的），必须在任何Mobx相关代码执行前调用。

推荐放在服务端的主入口文件（比如server.ts），或者专门处理SSR渲染的模块里，示例代码：

import { configure, enableStaticRendering } from "mobx";
import express from "express";

// 第一步：启用服务端静态渲染模式
enableStaticRendering(true);

// 第二步：配置全局Mobx规则（和客户端保持一致）
configure({
  enforceActions: "always", // 强制通过action修改状态，避免直接赋值
  computedRequiresReaction: true // 确保计算属性只有在被观察时才会运行
});

// 之后再导入store、组件等依赖
import { createRootStore } from "./stores/rootStore";
import { renderToString } from "react-dom/server";
import App from "./App";

const app = express();

app.get("*", (req, res) => {
  // 初始化store
  const rootStore = createRootStore();
  // 渲染组件
  const appHtml = renderToString(<App rootStore={rootStore} />);
  // 拼接模板并返回
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${appHtml}</div>
        <script src="/client-bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000);

2. configure：服务端+客户端入口文件都要配置 #

configure是全局Mobx行为的配置（比如状态修改规则、计算属性触发逻辑），为了避免服务端渲染的HTML和客户端hydration时出现不一致，服务端和客户端必须使用完全相同的配置，且都要在store初始化、组件渲染前执行。

客户端入口示例（比如main.tsx）： #

import { configure } from "mobx";
import { createRoot } from "react-dom/client";
import App from "./App";
import { createRootStore } from "./stores/rootStore";

// 和服务端完全一致的Mobx全局配置
configure({
  enforceActions: "always",
  computedRequiresReaction: true
});

// 初始化store并渲染组件
const rootStore = createRootStore();
const root = createRoot(document.getElementById("root")!);
root.render(<App rootStore={rootStore} />);

为什么不能放在App.tsx？ #

• App.tsx是组件文件，可能会被路由懒加载、或者在客户端多次渲染，导致配置执行时机过晚（Mobx已经开始处理状态），引发行为不一致。
• 服务端渲染时，App.tsx是被渲染的目标组件，此时调用配置已经来不及，会导致Mobx在服务端错误地追踪状态变化。

核心总结 #

• enableStaticRendering(true)：仅服务端入口，最先执行，在store创建、组件渲染前。
• configure：服务端+客户端入口都要加，配置完全一致，同样在store和组件初始化前执行。

内容的提问来源于stack exchange，提问作者Ysm