Я использую React в своем проекте, и у меня есть проблемы с предварительным рендерингом на стороне клиента. Точнее говоря, необходимо настроить SEO, который является наименее безболезненным способом переназначения существующего приложения реагирования с помощью маршрутов реакции.

Некоторые примеры, которые я исследовал:

  1. Gatsby.js — https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/
  2. Next.js — https://nextjs.org/docs#custom-document
  3. Netlify — https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87
  4. React-snap — https://web.dev/prerender-with-react-snap/
  5. Prerender.io — https://prerender.io/
  6. Серверная сторона Keen отрендерена — https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
  7. Раззл — https://reactresources.com/topics/razzle
  8. Реактивный шлем — https://github.com/nfl/react-helmet

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

Или есть другие более быстрые варианты, кроме предварительного рендеринга?

Благодарю.

чтобы создать приложение на стороне сервера с безболезненной интеграцией, вы можете использовать мой cli для генерации конфигурации по умолчанию, например, создать реагирующее приложение cli из facebook, https://github.com/ghondar/crassa

IMO, вам действительно не нужно использовать инфраструктуру для достижения SSR, если вы хотите сохранить контроль, не превращая свою кодовую базу в черный ящик и выбирая свой собственный стек.

Я создал шаблон с помощью Node Express. Поддерживает:

  • SSR с использованием StaticRouter на сервере и BrowserRouter на клиенте
  • ES6 перенос веб-пакетов горячая перезагрузка как клиента, так и сервера и автоматически обновляемый браузер
  • Redux, предварительная загрузка данных и увлажнение хранилища клиентов

    https://github.com/kimgysen/isomorphic-react-setup

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

Я создал несколько основных сайтов по SSR за несколько часов.
Мне нравится наблюдать за избыточностью, чтобы инициировать серверные вызовы ajax перед рендерингом контента (используя forkJoin), но это не включено в шаблон (на самом деле я не поддерживал его с тех пор, как загрузил в первый раз).

Но с точки зрения настройки, я не вижу смысла в использовании фреймворка для этого обязательно, это действительно не так больно / трудно сделать самостоятельно.
Преимущество, которое мне особенно нравится, состоит в том, что вы не зависите от объема и зависимостей фреймворка. У вас не будет проблем с такими вещами, как «фреймворк будет поддерживать эту функцию или исправлять эту ошибку в одном из следующих выпусков».

Хотя в конечном итоге все сводится к личному выбору. Так что я не хочу понижать эти рамки.

Примечание. Способ, которым Redux выполняет предварительный рендеринг, заключается в простом добавлении объектов хранилища (состояний) Redux к объекту окна в HTML, который отправляется обратно клиенту.
Затем на клиенте он инициализирует хранилища с этими объектами.
Очень просто, это то, чего легко достичь, даже если вы решите не реализовывать какие-либо другие функции БСО.