如何在Meteor环境中使用React，Material UI和Styled-components管理服务器端渲染？

Question

我已经按照Meteor docs中的说明实施了。 我添加的所有组件CSS都被渲染。 但是Material UI组件的外观并不像我在客户端版本中那样。

我已经尝试过这个MaterialUI Docs ，但是还没有运气。 另外我没有使用react-jss 。

如果有人知道我可以使用的任何示例项目，那将真的很棒。

Answer 1

即使他们使用Bootstrap而不是Material UI，我还是建议您检查一下管理SSR的样板： cleverbeagle pup ，现在也使用样式化组件。 它将为您提供一个实现方法的好主意，或者您可以尝试将CS​​S框架和组件迁移到Material UI。

Answer 2

您可以尝试使用npm软件包maka-cli ，并使用react，material-ui和SSR生成样板应用程序，然后看看我是如何做到的：

$ maka create NewApp --theme=material --ssr=true --client=react

然后，导航到该文件：

./NewApp/imports/startup/server/index.jsx

您会看到该应用程序如何通过SSR搭建出Material-UI。 请注意，这不是使用最新的Material-ui（1.0.0-beta.36）...，但这可能是一个开始！

/************* SSR Code ********************/
import Routes from '../lib/routes.jsx';
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { onPageLoad } from 'meteor/server-render';
import { StaticRouter } from 'react-router-dom';
import { createMemoryHistory } from 'history';


import { SheetsRegistry } from 'react-jss/lib/jss';
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import preset from 'jss-preset-default';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
import { grey } from 'material-ui/colors';

onPageLoad(sink => {
    const history = createMemoryHistory(sink.request.url.pathname);
    const App = (props) => (
        <StaticRouter
            location={props.location}
            context={{}}>
            <Routes history={history}/>
        </StaticRouter>
    );
    // Create a sheetsRegistry instance.
    const sheetsRegistry = new SheetsRegistry();

    // Create a theme instance.
    const theme = createMuiTheme({
        palette: {
            primary: grey,
            accent: grey,
            type: 'light',
        },
    });

    const jss = create(preset());
    jss.options.createGenerateClassName = createGenerateClassName;

    const html = renderToStaticMarkup(
      <JssProvider registry={sheetsRegistry} jss={jss}>
        <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
          <App location={sink.request.url} />
        </MuiThemeProvider>
      </JssProvider>
    );
    const css = sheetsRegistry.toString();
    sink.appendToHead(`<style id="jss-server-side">${css}</style>`);
    sink.renderIntoElementById('app', html);
});

Answer 3

这个问题的答案非常简单，只需遵循ui和styled-components文档中的文档，并使用在两个SSR主题中实现的功能即可。

然后，您可以使用来自材料ui和样式化组件的样式标记，它们工作正常。 我在这里展示了我的SSR代码，它介绍了如何在流星环境中进行SSR渲染。

SSR实施文档：

带有样式组件用法的流星文档

MaterialUI文档

import React from 'react'
import { MuiThemeProvider, createMuiTheme, createGenerateClassName } from '@material-ui/core/styles'
import { SheetsRegistry } from 'react-jss/lib/jss'
import JssProvider from 'react-jss/lib/JssProvider'
import { renderToString } from 'react-dom/server'
import { onPageLoad } from 'meteor/server-render'
import { StaticRouter } from 'react-router'
import { Provider } from 'react-redux'
import { Helmet } from 'react-helmet'
import { ServerStyleSheet } from 'styled-components'
import MainApp from '../imports/app/MainApp'
import store from '../imports/app/store/store'

onPageLoad(sink => {
  const context = {}
  // Create a sheetsRegistry instance.
  const sheetsRegistry = new SheetsRegistry()

  // Create a sheetsManager instance.
  const sheetsManager = new Map()
  // Theme Font Change
  const theme = createMuiTheme({
    typography: {
      fontFamily: 'FuturaPT-Light',
      fontWeight: 'normal',
      fontStyle: 'normal',
    },
  })
  const generateClassName = createGenerateClassName()
  const sheet = new ServerStyleSheet()

  const App = () => (
    <Provider store={store}>
      <StaticRouter location={sink.request.url} context={context}>
        <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
          <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
            <MainApp />
          </MuiThemeProvider>
        </JssProvider>
      </StaticRouter>
    </Provider>
  )

  sheet.collectStyles(<App />)
  sink.renderIntoElementById('react-root', renderToString(<App />))
  const css = sheetsRegistry.toString()
  const helmet = Helmet.renderStatic()
  sink.appendToHead(helmet.meta.toString())
  sink.appendToHead(helmet.title.toString())
  sink.appendToHead(`<style id="jss-server-side">${css}</style>`) // material-ui css attached
  sink.appendToHead(sheet.getStyleTags()) // styled-components css attached

  // console.log(html)
  const preloadedState = store.getState()

  sink.appendToBody(
    `<div id="pre-loaded-state" style="display:none">${JSON.stringify(preloadedState).replace(
      /</g,
      '\\u003c'
    )}</div>`
  )
})