Первоначальная статическая рендеринг HTML-кода с помощью Webpack

Есть ли способ предварительно сгенерировать структуру HTML (одного маршрута) Реагировать приложение непосредственно в точке ввода HTML?

Затем страница сможет отображать HTML (на основе исходного состояния React) до загрузки любого JS.

Я использую webpack-html-loader, но любой другой загрузчик или плагин приветствуется;)

PS: May static-site-generator-webpack-plugin оказать какую-либо помощь?

PS: я не использую React Router

Ответы

Ответ 1

Если вы хотите использовать static-site-generator-webpack-plugin, вам сначала нужно собрать пакет с webpack bundle.js, который экспортирует функцию рендеринга, которая принимает следующие аргументы.

  • locals объект с различными метаданными страницы, например. title, которые входят в параметры компонента (традиционно считаются шаблонами).
  • callback обратный вызов nodejs style (err, result), который вы вызовете с помощью отображаемого html в качестве значения для result

например.

// entry.js, compiled to bundle.js by webpack

module.exports = function render(locals, callback) {
  callback(null, 
      '<html>' + locals.greet + ' from ' + locals.path + '</html>');
};

В этой функции вы создадите экземпляр своих компонентов (возможно, с помощью React Router, если хотите) и визуализируйте их с помощью ReactDOMServer.renderToString().

Затем вы укажете скомпилированный bundle.js как bundle в своем экземпляре StaticSiteGeneratorPlugin, а также ваши конкретные маршруты в paths и в locals объект, содержащий вышеупомянутые значения метаданных.

var paths, locals; // compute paths from metadata files or frontmatter

module.exports = {
  entry: {
    bundle: './entry.js' // build bundle.js from entry.js source
  },
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin('bundle', paths, locals)
  ]
}

Ключи, которые вы указываете для locals в webpack.config.js внутри, будут присутствовать в параметре locals для каждого вызова render(locals, callback). Они будут объединены с path, assets и webpackStats ключами, предоставляемыми плагином.

Если вы хотите загрузить javascript-код на свои страницы после рендеринга, вы можете скомпилировать дополнительную запись page.js в конфигурацию вашего веб-пакета, которая называет ReactDOM.render() типичным образом, а затем загружает этот пакет в тег script, испускаемый в вашей функции render(locals, callback) в вашем bundle.js (см. выше). Убедитесь, что page.js монтирует компоненты в том же месте в DOM, что и при визуализации entry.js (вы, вероятно, установите атрибут id в родительском элементе). Вам также необходимо убедиться, что все зависимые переменные местоположения (то есть пути маршрута) выравниваются в обеих средах.

Проверьте исходный код Gatsby, который также использует этот плагин. Вы также можете посмотреть исходный код Phenomic для альтернативного подхода.

Ответ 2

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