Сочетание реакции и нефрита

Я работаю над изоморфным javascript-приложением с выражением+. Мы начали использовать jade для серверных шаблонов для статического контента, но сочетание этих двух быстро становится громоздким. Мы закончили с чем-то вроде этого:

В экспресс-маршрутах:

router.get("/", function(req, res) {
  var webpackStats = require('../../config/webpack-stats.json');
  var reactHtml = React.renderToString(HiwApp({}));
  var slideshowHtml = React.renderToString(slideshowApp({}));
  var config = {
    webpackStats: webpackStats,
    reactOutput: reactHtml,
    slideshowHtml: slideshowHtml
  };
  res.render("how_it_works/howitworks", config);
});

В Jade:

body
  .company-logo.center
  #react-main-mount
    != reactOutput
  include ./content_block_1.jade

  include ./content_block_2.jade

  #slideshow-main-mount
    != slideshowHtml

Это очень хрупкое, если мы хотим, чтобы jsx, затем шаблон jade, затем больше jsx, мы должны убедиться, что получим правильный порядок.

Моя идея - все это сделать с помощью jsx. Я знаю, что для этого есть React.renderToStaticMarkup, но это не решает проблему смешивания динамического со статическими страницами.

Большие вопросы: если мы решили сделать все это с помощью jsx (скажем, layout.jsx, который содержит все компоненты), тогда позвоните React.renderToString(App({});, это будет серьезный удар производительности? Если это так, есть ли лучший способ сделать это, чтобы легко объединить статические и динамические блоки?

Ответ 1

Хотя это может быть крошечный бит вне темы: Мы застряли с шаблонами нефрита.

В принципе, мы хотели, чтобы гибкость использовала архитектуру non-response + flux для областей сайта, когда и если это возникло. Наш сайт в основном состоит из нескольких небольших приложений SP: Site, UserAccount, Team и Admin.

Почему мы это сделали?

Небольшие размеры и накладные расходы для пользователей, которые не имеют доступа ко всем разделам сайта.
Опция "отказаться" от Реакции и потока, если и когда возникнет такая необходимость.
Простая аутентификация на стороне сервера.

Ответ 2

То, как мы это успешно сделали, - это сделать шаблон оболочки JSX (Html.jsx) на сервере с помощью React.renderToStaticMarkup(), а затем отправить его как ответ на каждый запрос экспресс-маршрутизации на стороне сервера, который предназначен для доставки некоторых HTML в браузер. Html.jsx - это просто оболочка, содержащая информацию заголовка html и сценарии GA и т.д. Он не должен содержать макет.

// Html.jsx
render(){
  return (
    <html>
      <head>
        // etc.
      </head>
      <body>
        <div
          id="app"
          dangerouslySetInnerHTML={{__html: this.props.markup}}>
        </div>
      </body>
      <script dangerouslySetInnerHTML={{__html: this.props.state}</script>
      <script>
        // GA Scripts etc.
      </script>
    </html>
  )
}

Помните, что это полностью нормально и даже рекомендуется использовать dangerouslySetInnerHTML на сервере при увлажнении вашего приложения.

Динамическая компоновка должна выполняться с вашими изоморфными компонентами через иерархию компонентов на основе конфигурации состояния/реквизита. Если вы используете React Router, ваш маршрутизатор будет отображать обработчики на основе маршрутов, которые вы предоставляете, поэтому это означает, что вам не нужно управлять этим самостоятельно.

Причина, по которой мы используем эту технику, заключается в том, чтобы архитектурно отделить наше "приложение", которое изоморфно и отвечает на состояние с нашей серверной оболочки шаблона, которая является всего лишь механизмом доставки и является фактически котельной. Мы даже сохраняем шаблон Html.jsx среди всех экспресс-компонентов в нашем приложении и не позволяем ему смешиваться с другими изоморфными компонентами React.

Один из самых полезных ресурсов, который я нашел для разработки React/isomorphic architecture, был https://github.com/yahoo/flux-examples/tree/master/react-router, из которого мы украли эту технику.

Мы рассмотрели идею интеграции рулей в качестве механизма шаблонов для клиентских разработчиков с использованием наших продуктов в будущем, но решили, что было бы сложнее написать собственный DSL в JSX и использовать некоторые простые процедуры синтаксического анализа для анализа нашего HTML-подобного DSL в JSX, добавив в начале шаблона такие вещи, как export default (синтаксис модуля ES6), а затем импортируйте шаблон в компонент рендеринга.

Вы могли бы, конечно, следовать этой линии мысли и использовать jade-компилятор, чтобы выплевывать шаблон, а затем добавлять синтаксис модуля вокруг этого, если вы считаете, что отдельные нефритовые файлы необходимы. Я также заметил этот проект, хотя я не исследовал его в гневе: https://github.com/jadejs/react-jade.