如何让 SSR 与 fluentui /Remix 一起运行？答案

【问题标题】：How to get SSR to work with fluentui /Remix run?如何让 SSR 与 fluentui /Remix 一起运行？
【发布时间】：2021-12-23 04:31:53
【问题描述】：

如何安装流利的 UI 与 remix 运行反应？我相信这很重要，可以在这里解决，因为它是社区采用 office-UI-fabric-react 的绊脚石。

【问题讨论】：

我快速浏览了 Fluent UI。似乎它使用 css-in-js，只要不需要自定义编译器插件，它通常与 remix 兼容（remix 不会公开其 esbuild 配置）。您能否更具体地说明您面临的问题？
我在控制台中收到警告：没想到服务器 HTML 在中包含
你能分享你的混音应用程序的代码吗？您是如何将 CSS 加载到您的应用中的？

标签： reactjs fluent-ui fluentui-react remix.run

【解决方案1】：

在研究了 FluentUI 和 Remix 的文档以及一些 github 问题之后，这是行之有效的方法。

编辑root.tsx。将{typeof document === "undefined" ? "__STYLES__" : null} 添加到头部标签。在结束正文标记之前添加{typeof document === "undefined" ? "__SCRIPTS__" : null}。
编辑entry.client.tsx 以包括：

import { renderToString } from "react-dom/server"
import { RemixServer } from "remix"
import type { EntryContext } from "remix"
import { resetIds, Stylesheet } from "@fluentui/react"

const sheet = Stylesheet.getInstance()

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  resetIds()
  let markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  )

  markup = markup.replace(
    "__STYLES__",
    `<style data-merge-styles="true">${sheet.getRules(true)}</style>`
  )

  markup = markup.replace(
    "__SCRIPTS__",
    `<script type="text/javascript">
      window.FabricConfig = window.FabricConfig || {};
      window.FabricConfig.serializedStylesheet = ${sheet.serialize()};
    </script>`
  )

  responseHeaders.set("Content-Type", "text/html")

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  })
}

重新启动您的混音应用

参考：
https://remix.run/docs/en/v1/guides/styling#css-in-js-libraries https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing#nextjs-setup https://github.com/microsoft/fluentui/issues/11411

如果您也想加载 fluentui 图标，请将 initializeIcons 导入您的页面并在任何函数之外调用它

【讨论】：