客户端使用antd的时候，ssr后无样式

[xhubert]

再请问一下，你有试过前端用antd组件库么？我这边在尝试使用的时候，通过服务端渲染，样式未被载入（应该是webpack编译的问题）。如果你有用过，方便分享一下经验么？

[alexayan]

@idpocky 很有可能是你 renderFullPage 中生成结果页中错误。

// 读取通过 `webpack` 编译后的 `index.html` 页面，其中已经包含脚本和外部样式的引用
const indexHtml = fs.readFileSync(path.join(__dirname, `../../../${CONFIG.DIST_FOLDER}/index.html`)).toString();

export function renderFullPage({html, state}) {
  const ssrHtml = `
  <div id="root">
  ${html}
  </div>
  <div id="data" data-state="${entities.encode(JSON.stringify(state))}"></div>
  `;
  let rtn = indexHtml.replace('<div id="root"></div>', ssrHtml);
  return rtn;
}

[xhubert]

感谢！ 其实，我现在是在一个原有的基于dva的单页应用实例基础上增加ssr支持，所以现在启动ssr的时候，并没有通过webpack编译，所以才无法加载到。

想请教几个问题：

1. 启动ssr的webpack配置，是如何处理先对客户端编译的？
2. 如果启动ssr没有单独的webpack配置，是否就通过启动脚本先编译客户端，后启动ssr server？
3. 开发调试，是否仍然通过启动客户端的dev环境进行？

我现在客户端编译用的是roadhog。

[alexayan]

@idpocky

开发调试使用 roadhog 就可以了，ssr 与业务代码无关，最终部署前才可能需要在本地起 ssr 服务，查看渲染结果。

启动 ssr 服务前，需要先使用 webpack 对客户端源码进行编译处理

[xhubert]

ok，暂时就这么办吧。也挺好，要发布就搞个钩子，直接拉代码。

[xhubert]

对了，再问一个问题啊，为什么需要加下面这一行代码？state的值暴露在html中的用意是什么？

<div id="data" data-state="${entities.encode(JSON.stringify(state))}"></div>

[alexayan]

@idpocky 客户端需要服务器端渲染时的 state 作为初始 state，避免客户端重复渲染。

[xhubert]

好的。多谢。