如何让 SSR 与 Fluentui /Remix 一起运行？

Question

如何让 SSR 与 Fluentui /Remix 一起运行？

sur*_*dar 7 reactjs fluent-ui fluentui-react remix.run

如何安装 Fluent UI React 和 remix run？我相信这个问题非常重要，需要在这里解决，因为它是社区采用 office-UI-fabric-react 的绊脚石。

Answer 1

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

编辑root.tsx。添加{typeof document === "undefined" ? "__STYLES__" : null}到 head 标签。添加{typeof document === "undefined" ? "__SCRIPTS__" : null}在结束正文标记之前。
编辑entry.server.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,
  })
}

Run Code Online (Sandbox Code Playgroud)

重新启动您的混音应用程序

参考资料：
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到您的页面中并在任何函数之外调用它

归档时间：	4 年前
查看次数：	1174 次
最近记录：	2 年，4 月前