Как управлять рендерингом на стороне сервера в среде Meteor с помощью компонентов React, Material UI и Styled-компонентов? - PullRequest
Новая
       37

Как управлять рендерингом на стороне сервера в среде Meteor с помощью компонентов React, Material UI и Styled-компонентов?

0 голосов
/ 15 сентября 2018

Я реализовал, как объяснено в Meteor docs .Все мои компоненты CSS, которые я добавил, будут обработаны.Но компоненты пользовательского интерфейса материалов выглядят не так, как в версии клиента.

Я пробовал Документы MaterialUI , но пока не повезло.Также я не использую react-jss.

Если кто-нибудь знает примеры проектов, которые я мог бы использовать, это было бы действительно здорово.

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Вы можете попробовать пакет npm maka-cli , сгенерировать шаблонное приложение с реакцией, material-ui и SSR и посмотреть, как я это сделал:

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

Затем перейдите к файлу:

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

и вы можете видеть, как приложение защищало материал-интерфейс с помощью SSR. Обратите внимание, что здесь не используется последний материал-интерфейс (1.0.0-бета.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);
});
0 голосов
/ 18 сентября 2018

Ответ на этот вопрос очень прост, просто следуйте документации в документах по пользовательскому интерфейсу и стилям компонентов и используйте функции, реализованные в обеих темах по БСО.

Затем у вас есть теги стилей из пользовательского интерфейса материала и стиля.компоненты работают нормально.Я показал здесь мой код SSR , который следует, как выполнять рендеринг SSR в метеорной среде.

Документы по реализации SSR:

Документы Meteor со стилем-использование компонентов

MaterialUI docs 

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>`
  )
})
0 голосов
/ 18 сентября 2018

Даже если они используют Bootstrap, а не Material UI, я рекомендую вам проверить этот шаблон, который управляет SSR: cleverbeagle pup , который теперь также использует Styled-компоненты. Это даст вам хорошее представление о том, как этого добиться, или вы можете попытаться перенести инфраструктуру и компоненты css в интерфейс материалов.

...