React+Apollo2 SSR应用：Node文件系统生成的HTML文件不被浏览器识别

你已经搞定了SSR的核心渲染逻辑，但写入的HTML浏览器不认，大概率是生成的内容缺少完整的HTML文档结构，或者没正确处理Apollo初始状态的注入，导致浏览器无法解析成合法网页。下面给你一步步的解决方案：

1. 补全完整的HTML文档结构 #

你的现有代码只渲染了App组件的内容，但浏览器需要<!DOCTYPE html>、<html>、<head>、<body>这些完整标签才能正确识别。修改渲染逻辑，把组件内容包裹在标准HTML骨架里：

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { ApolloProvider, getDataFromTree } from 'react-apollo';
import Main from './Main'; // 你的Main组件
import client from './apollo-client'; // 你的Apollo客户端配置

export default (Page) => (req, res) => {
  const App = (
    <ApolloProvider client={client(fetch)}>
      <Main>
        <Page />
      </Main>
    </ApolloProvider>
  );

  getDataFromTree(App).then(() => {
    // 1. 渲染组件为字符串
    const appHtml = ReactDOMServer.renderToString(App);
    
    // 2. 获取Apollo初始状态，用于客户端复用服务端数据
    const initialState = client(fetch).cache.extract();
    
    // 3. 构建完整HTML文档
    const fullHtml = `
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>页面标题</title>
          <!-- 这里可以引入CSS、字体等静态资源 -->
        </head>
        <body>
          <div id="root">${appHtml}</div>
          <!-- 注入Apollo状态，避免客户端重复请求 -->
          <script>
            window.__APOLLO_STATE__ = ${JSON.stringify(initialState).replace(/</g, '\\u003c')}
          </script>
          <!-- 引入客户端打包后的JS文件，完成hydration -->
          <script src="/client.bundle.js"></script>
        </body>
      </html>
    `;

    // 4. 写入静态文件（如果是生成静态文件的脚本）
    const fs = require('fs');
    fs.writeFileSync('./dist/static.html', fullHtml, 'utf8');
    
    // 如果是HTTP服务场景，直接返回给客户端
    // res.send(fullHtml);
  }).catch(err => {
    console.error('SSR渲染出错:', err);
    res.status(500).send('SSR Error');
  });
};

2. 确保文件写入的编码正确 #

写入文件时一定要指定utf8编码，否则可能出现乱码，导致浏览器无法解析。如果用异步写入方法，也要加上编码参数：

fs.writeFile('./dist/static.html', fullHtml, 'utf8', (err) => {
  if (err) throw err;
  console.log('静态HTML文件生成成功！');
});

3. 客户端配合完成Hydration #

服务端生成的HTML需要客户端做hydration才能让页面交互正常，所以客户端入口文件要读取服务端注入的状态，初始化Apollo客户端：

// client/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import client from './apollo-client';
import Main from './Main';
import Page from './Page';

// 读取服务端注入的初始状态
const initialState = window.__APOLLO_STATE__;
// 恢复Apollo缓存
client.cache.restore(initialState);

ReactDOM.hydrate(
  <ApolloProvider client={client}>
    <Main>
      <Page />
    </Main>
  </ApolloProvider>,
  document.getElementById('root')
);

常见排查点 #

• 打开生成的HTML文件，查看源码是否有乱码或者缺少DOCTYPE标签
• 检查浏览器控制台是否有报错，比如Apollo缓存不匹配、hydration失败的提示
• 确认getDataFromTree已完成所有数据请求，避免组件内容不完整

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