在SSR中正确解析ES Modules的关键是确保运行环境支持ESM且模块路径、加载时机、导出形式符合SSR约束：需启用Node.js ESM模式（.mjs、"type": "module"或--input-type=module），避免顶层await和浏览器API，渲染函数须同步或显式async，动态导入需同构处理，导出必须含有效default。
在服务端渲染（SSR）中正确解析 ES Modules，关键不是“让 Node.js 手动解析 import/export”，而是确保运行环境支持 ESM 且模块路径、加载时机、导出形式符合 SSR 场景的约束。Node.js 自 v12.20+ 原生支持 ESM，但 SSR（如 Next.js、Nuxt、或自研 SSR 框架）对模块的使用有额外要求——比如不能在顶层用 await import()、需避免浏览器专属 API、导出必须是纯静态声明等。
确保 Node.js 运行在 ESM 模式下
Node.js 默认以 CommonJS 模式运行 .js 文件。要启用 ES Modules，必须满足以下任一条件：
- 文件扩展名为
.mjs（无论package.json设置如何） -
package.json中显式声明："type": "module" - 启动时加参数：
node --input-type=module index.js（仅适用于字符串输入）
⚠️ 注意：一旦启用 ESM，require() 将不可用，所有依赖必须用 import 声明；且 __dirname、__filename 不再默认存在，需用 import.meta.url 配合 fileURLToPath 替代。
SSR 渲染函数必须是同步可执行或显式异步可 await 的
ES Modules 的 import 语句只能出现在顶层（不能在函数内、条件中），所以 SSR 入口文件（如 server.js 或 render.js）应：
立即学习“Java免费学习笔记（深入）”；
- 用
import预先加载组件、工具函数、数据获取逻辑等模块 - 将实际渲染逻辑封装为函数（如
renderToString()），该函数可返回 Promise（支持异步数据获取） - 避免在模块顶层执行副作用（如直接调用
fetch），否则会阻塞整个模块初始化
✅ 正确示例：
import { renderToString } from 'react-dom/server';<br>import App from './App.mjs'; // ESM 格式组件<br>import { fetchData } from './api.mjs'; // 导出 async 函数<br><br>export async function renderPage(url) {<br> const data = await fetchData(url);<br> const html = renderToString(<App data={data} />);<br> return `<!DOCTYPE html><html>...${html}...</html>`;<br>}
处理动态导入与代码分割（尤其在同构场景）
浏览器端常用 import() 实现懒加载，但在 SSR 中需谨慎：
- 服务端不支持动态
import()的“按路由拆包”行为（因无浏览器导航上下文） - 若组件内部用了
const Module = await import('./Feature.js')，SSR 时会报错或返回空内容 - 解决方案：对 SSR 环境做判断，服务端走静态 import，客户端保留动态逻辑；或统一用构建工具（如 Vite、Webpack）预编译为兼容格式
✅ 推荐方式（同构安全）：
// FeatureClientOnly.jsximport { useEffect, useState } from 'react';<br>export default function FeatureClientOnly() {<br> const [Component, setComponent] = useState(null);<br> useEffect(() => {<br> import('./Feature.mjs').then(mod => setComponent(() => mod.default));<br> }, []);<br> return Component ? <Component /> : null;<br>}
注意模块导出一致性（避免 default + named 混用陷阱）
SSR 框架常需读取模块的默认导出作为主组件（如 export default App），若误写成命名导出或混合导出，会导致渲染失败：
- ❌ 错误：
export const App = () => <div>Hi</div>;（无 default，SSR 入口无法识别） - ✅ 正确：
export default function App() { return <div>Hi</div> } - 如需同时暴露工具函数，可用命名导出：
export function getStaticProps() { ... }，不影响 default 主体
构建工具（如 Vite）在 SSR 模式下会自动校验入口模块是否含有效 default 导出，但手写 SSR 时需人工确认。
