Ввод статического HTML в компонент React с помощью Node / Express

В рамках моего одностраничного приложения React мне нужно создать несколько статических HTML-страниц с большим количеством текста (политика конфиденциальности, политика файлов cookie, условия обслуживания и т. Д.). Технически это не сложно, но в целом это около 100 КБ неуминированного текста, который в конечном итоге войдет в мою начальную загрузку данных для нескольких страниц, которые когда-либо посетят 0,05% пользователей. Конечно, минификация и сжатие сократят это, но мне он все еще не нужен для начальной загрузки, поэтому я хочу избавиться от него в любом случае.

Итак, как мне загрузить этот контент асинхронно, чтобы избежать его в моем bundle.js?

Решение 1.Разделение кода Webpack 2

Вероятно, это правильный способ сделать это, но я еще не рассматривал это. Кроме того, документация Webpack по-прежнему практически не читается (но определенно лучше - хорошие ребята!), Поэтому я подумал, что это займет у меня больше времени, чем с:

Решение 2 - экспресс-рендеринг статического HTML

Я использую Google App Engine, поэтому у меня уже есть базовый сервер Node, который доставляет мои index.html. Мне просто нужно настроить еще несколько маршрутов, которые я могу fetch со стороны клиента, чтобы получить фрагменты HTML. Следующие суть должны объяснить основы.

Теперь всякий раз, когда я получаю template/templateName со стороны клиента, Express отправляет мне обратно HTML-контент для инъекции в компонент React.

ГОЧА

В этом есть одна серьезная проблема. Если вы тестируете это локально с помощью webpack-dev-server, это не сработает. Причина в том, что webpack-dev-server не является настоящим сервером (AFAIK) и не обрабатывает маршруты API. Для этого вам нужно будет запустить другой процесс локально в терминале и проксировать запрос в конфигурации вашего веб-сервера.

В моей текущей настройке у меня есть webpack-dev-server, настроенный в моей конфигурации следующим образом:

devServer: {
  contentBase: "public",
  compress: false,
  historyApiFallback: true,
  proxy: {
    "/template": "http://localhost:8080"
  },
  port: 9000
}

Таким образом, node server.js будет запускать внутренний сервер на порту 8080, а затем webpack-dev-server --watch будет работать на порту 9000, но для любого запроса к /template он попадет на внутренний сервер.