Office Fabric ui节点服务器中的服务器端呈现

我正在制作一个 MERN 应用程序用于培训，我虽然使用 Office Frabric UI 可能是一个好主意 .

我正在为我的应用程序使用服务器端渲染，但是当我使用单个 <Fabric> 组件时，我收到此错误：

/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/index.js:277
    var head = document.getElementsByTagName('head')[0];
               ^

ReferenceError: document is not defined
    at registerStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:390:33)
    at applyThemableStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:243:7)
    at /home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:183:7
    at measure (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:121:3)
    at Object.loadStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:167:3)
    at Object.<anonymous> (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@uifabric/utilities/src/scroll.scss.ts:3:1)
    at Module._compile (module.js:641:30)
    at Module._extensions..js (module.js:652:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:560:32)
[nodemon] app crashed - waiting for file changes before starting...

这就是问题 .

好的，我在服务器端渲染的"documentation"步骤中看到：

• 我把它放在我的 serverRender 文件中：

从'react'中导入React;从'react-dom / server'导入ReactDOMServer;从'axios'导入axios;从'@ microsoft / load -themed-styles'导入;

从'./src/components/app'导入应用程序;从'./config'导入配置;

const getApiUrl = contestId => {if（contestId）{return ${config.serverUrl}/api/contests/${contestId} ; } return ${config.serverUrl/api/contests} ; };

const getInitialData =（contestId，apiData）=> {if（contestId）{return {currentContestId：apiData.id，contests：{[apiData.id]：apiData}}; } return {contests：apiData.contests}; };

const serverRender =（contestId）=> axios.get（getApiUrl（contestId）） . then（resp => {let _allStyles =''; const initialData = getInitialData（contestId，resp.data）; configureLoadStyles（（styles：string）= > ）;

return {
    initialMarkup: ReactDOMServer.renderToString(
      <App initialData={initialData} />
    ),
    initialData,
    styles: _allStyles
  };
});

export default serverRender;

• 这对我的 server 文件：

从'./config'导入配置;从'./api'导入apiRouter;从'./serverRender'导入serverRender;

//从'node-sass-middleware'导入sassMiddleware;从'path'导入路径;从'快递'进口快递;

const server = express（）;

/ * server.use（sassMiddleware（{src：path.join（__ dirname，'sass'），dest：path.join（__ dirname，'public'）}））; * /

server.set（'view engine'，'ejs'）;

server.get（['/'，'/ contests /：contestId']，（req，res）=> {serverRender（req.params.contestId）.then（（{initialMarkup，initialData，styles}）=> {res .render（'index'，{initialMarkup，initialData}）; red.render（'header'，）;}） . catch（console.error）;}）;

server.use（'/ api'，apiRouter）; server.use（express.static（ '公共'））;

server.listen（config.port，config.host，（）=> {console.info（'Express listening on port：'，config.port）;}）;

• 最后在我的 header 文件中：

命名竞赛

<％ - styles - ％>

它仍然不起作用 .

从 Office Fabric UI 正确到SSR是哪个？