Блог

Я работаю над приложением, использующим react-rails / webpacker, с сервером rails и интерфейсом React. Кроме того, мы также используем стилизованные компоненты и перезаписали существующий метод ReactRailsUJS.serverRender в app/javascript/packs/server_rendering.js файл для учета стилизованных компонентов выглядит следующим образом (см. https://github.com/reactjs/react-rails/issues/864#issue-291728172 для получения дополнительной информации):

 // server_rendering.js

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';

const componentRequireContext = require.context('components', true);
const ReactRailsUJS = require('react_ujs');
ReactRailsUJS.useContext(componentRequireContext);

ReactRailsUJS.serverRender = function(renderFunction, componentName, props) {
  const ComponentConstructor = this.getConstructor(componentName);
  const stylesheet = new ServerStyleSheet();
  const wrappedElement = stylesheet.collectStyles(
    <ComponentConstructor {...props} />
  );
  const text = ReactDOMServer[renderFunction](wrappedElement);

  // prepend the style tags to the component HTML
  return `${stylesheet.getStyleTags()}${text}`;
}
 

Все это работает хорошо, поскольку параметр renderFunction, передаваемый в качестве первого аргумента функции ReactRailsUJS.serverRender, является методом renderToString в react-dom / server. Тем не менее, мы хотели бы обновить приложение, чтобы использовать метод renderToNodeStream для рендеринга наших компонентов react, что и привело меня к этому обсуждению.

Мне было интересно, есть ли кто-нибудь с более глубокими знаниями о том, как эти библиотеки работают на более базовом уровне, чтобы помочь мне понять, как мы могли бы использовать renderToNodeStream, учитывая настройки нашего приложения.