SSR 服务端渲染的问题

[Aruelius]

添加 ssr 参数后，打包出来的静态文件访问时 js 会最后加载，导致样式渲染不及时，一秒后 js 加载完毕，样式才渲染完毕。

export default defineConfig({
  ssr: {}
});

然而 dumi 官网也是服务端渲染，没有出现这种情况。

umiJs SSR 介绍

dumi SSR 配置 ...(process.env.NODE_ENV === 'development' ? {} : { ssr: {} }),

附上 Chrome DevTools Waterfall 图：

我的

dumi 官网

[KuangPF]

SSR 样式没有单独提取，晚些时候处理了发个版本。

[Aruelius]

还有就是打包完成后的 js 文件会比 dumi 官网多

dumi-theme-antd

dumi

[KuangPF]

0.3.7 版本修复了 SSR 样式问题。至于打包后 js 比 dumi 官网多还需要进一步定位，我看其他 dumi 主题包也一样，也有可能是 dumi 的包策略吧。

[Aruelius]

好的，十分感谢。

[KuangPF]

用0.3.8 版本吧，该版本修复了 publicPath 不设置时返回为 undefined 导致 SSR 样式无法引入的问题。

[Aruelius]

OK，谢谢。

[Aruelius]

首页样式渲染不及时的问题还是存在，不过文档页面 OK 了。

文档页面控制台有 error 输出，从首页点击链接过去不会有，页面 F5 刷新才出现

[Aruelius]

首页样式渲染不及时的问题还是存在，不过文档页面 OK 了。

文档页面控制台有 error 输出，从首页点击链接过去不会有，页面 F5 刷新才出现

这个 error 是只有在 guide 首页(docs/guide/index.md)刷新才会出现，且有三条，分别是：

• Text content does not match server-rendered HTML.
• Hydration failed because the initial UI does not match what was rendered on the server.
• There was an error while hydrating this Suspense boundary. Switched to client rendering.

[KuangPF]

我继续定位看下

[KuangPF]

升级到 0.3.9，优化了 @emotion 导出方式。

[Aruelius]

样式没问题了，幸苦。

[Aruelius]

首页样式渲染不及时的问题还是存在，不过文档页面 OK 了。

    [

        ![GIF 2023-8-21 10-21-09](https://user-images.githubusercontent.com/25380989/261895659-4bb9fb2a-2c28-493c-91e3-b5f7459b7129.gif)
      ](https://user-images.githubusercontent.com/25380989/261895659-4bb9fb2a-2c28-493c-91e3-b5f7459b7129.gif)

      [

      ](https://user-images.githubusercontent.com/25380989/261895659-4bb9fb2a-2c28-493c-91e3-b5f7459b7129.gif)

文档页面控制台有 error 输出，从首页点击链接过去不会有，页面 F5 刷新才出现

这个 error 是只有在 guide 首页(docs/guide/index.md)刷新才会出现，且有三条，分别是：

• Text content does not match server-rendered HTML.
• Hydration failed because the initial UI does not match what was rendered on the server.
• There was an error while hydrating this Suspense boundary. Switched to client rendering.

这个错误出现的原因应该是 docs/guide/ 目录下有个 index.md 文件导致的，在错误的地方断点，原因是当前页面的 title 与当前路由组（除 index.md）order 顺位第一的 title 不一样，所以抛出异常，在把 index.md 重命名后，所有错误消失。