Remix 支持两种 HTML 使用方式：纯静态页用 loader 返回带 text/html 响应头的 Response 字符串（禁用 fs，推荐内联）；动态交互页则必须重构为 React 组件+loader/action。根路由若同时定义组件和 loader，HTML 不生效。
Remix 本身不“部署 HTML”，而是让你在全栈上下文中复用现有 HTML——关键在于：要不要走 React 渲染流程，还是直接原样输出。答案取决于你的目标：如果只是想把一个静态 HTML 页面（比如营销页、SEO 主页）挂到 / 路由下，且不想重写为 JSX，那就绕过 React，用 loader 返回原始 HTML 响应；如果目标是把 HTML 结构逐步迁入 Remix 的数据流和嵌套路由体系，则必须拆解语义、提取 loader/action、用组件重构。
loader 返回 HTML 时 Content-Type 必须显式设置
常见错误是把 HTML 字符串直接 return <div>...</div> 或塞进 JSX，结果被 React 转义成文本；或者在 loader 里读取文件后只 return { html: content }，没设响应头，浏览器当成 JSON 解析，页面空白或触发下载。
- 必须返回
Response实例，且带Content-Type: text/html; charset=utf-8 - 本地开发可用
fs.readFileSync读public/index.html，但 Vercel 等无 fs 环境会报Error: ENOENT - 推荐方案：把 HTML 内联为字符串常量，避免运行时读文件 —— 更可靠，也符合边缘函数限制
export async function loader() {
const html = `<!DOCTYPE html><html><body><h1>Hello from Remix</h1></body></html>`;
return new Response(html, {
headers: { "Content-Type": "text/html; charset=utf-8" }
});
}
根路由（routes/_index.tsx）不能混用 React 渲染和 raw HTML
如果你在 routes/_index.tsx 同时写了 export default function Index() 组件和 export function loader()，Remix 会优先走 React 渲染路径，loader 返回的 HTML 完全不会生效——它只对纯 loader 路由（即没有默认导出组件的文件）起作用。
- 要纯 HTML 根页：删掉
routes/_index.tsx中的export default，只留loader - 若需部分动态（如插入当前时间），可在 HTML 字符串中插值，但注意 XSS 风险，别直接拼用户输入
- 别试图在组件里用
dangerouslySetInnerHTML+useEffect加载 HTML——这放弃 SSR，破坏 SEO，且滚动、状态恢复都失效
Vercel 部署时 fs 报错，本质是环境限制，不是代码 bug
fs.readFile 在 Vercel Serverless Function 中被禁用，不是你路径写错或文件不存在，而是平台策略。报 ReferenceError: fs is not defined 或 Error: ENOENT 都指向同一原因。
立即学习“前端免费学习笔记（深入）”；
- 不要在 loader 里调
fs，哪怕加了 try/catch 也没用 - 替代方案只有两个：
public/托管（通过file://URL 加载，但 Remix 不支持直接引用 public 文件）或内联 HTML 字符串 - 如果 HTML 很大，可提前构建时注入到模块中（例如用
import html from "./index.html?raw"，需配置 Vite 或 esbuild 支持?raw）
真正麻烦的不是怎么输出 HTML，而是后续要不要加交互、表单、数据加载——一旦开始动这些，就必须切回 Remix 的 loader/action + 组件范式。纯 HTML 路由是个起点，不是终点；而很多人卡在“以为能渐进迁移”，结果发现表单提交、错误边界、嵌套路由这些能力，根本没法从原始 HTML 里长出来。
