Reactjs wordpress 为 SEO 预呈现现有的客户端应用程序

Reactjs wordpress prerender existing client side application for SEO

我在我的项目中使用 React，我在客户端预渲染方面遇到了问题。 更具体地说，有必要配置 SEO 这是使用 react-routes

预呈现现有 reactjs 应用程序最简单的方法

Some examples I have researched:

  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’s Server Side Rendered - https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
  7. Razzle - https://reactresources.com/topics/razzle
  8. React Helmet - https://github.com/nfl/react-helmet

任何人都可以建议我应该选择哪个选项是最不痛苦的。 我有 headless wordpress 作为后端，reactjs 客户端作为前端。

或者除了预渲染还有其他更快的选择吗？

谢谢。

要创建具有无痛集成的服务器端应用程序，您可以使用我的 cli 生成默认配置，例如从 facebook 创建 react app cli，https://github.com/ghondar/crassa

IMO 如果你想保持控制而不将你的代码库变成黑盒子并选择你自己的堆栈，你真的不需要使用框架来实现 SSR。

我使用 Node Express 创建了一些样板。它支持：

  • SSR 在服务器端使用 StaticRouter，在客户端使用 BrowserRouter
  • ES6 webpack t运行spilation + 热重载客户端和服务器以及自动更新浏览器

  • Redux、数据预加载和客户端存储水合作用

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

上次我 运行 它，我注意到我没有将 favIcon 保存在 public 文件夹中，也许有一些小错误我会尽快修复（我已经修复它们在我的项目中，但没有更新这个 repo，因为反正没人看它（笑！）），但这里发生的事情并不难理解。

我用它在几个小时内创建了一些基本的 SSR 网站。
我喜欢 redux-observable 在呈现内容之前启动服务器 ajax 调用（使用 forkJoin），但这不包含在样板中（自从我第一次上传以来我实际上并不支持它）。

但就设置而言，我真的不认为为此必须使用框架有什么意义，自己做真的没有那么痛苦/困难。
我特别喜欢的好处是您不依赖于框架的范围和依赖性。你不会因为 'the framework will support this feature or fix that bug in one of the upcoming releases' 之类的事情而惹上麻烦。

虽然最终还是要看个人选择。所以我不想降级这些框架。

注意：Redux实现预渲染的方式很简单，就是在回传给客户端的html中的window对象中添加Redux store(state)对象
然后在客户端，它用这些对象初始化商店。
非常简单，这是很容易实现的，即使您决定不实现任何其他 SSR 功能。