SEO友好的React-Redux应用程序

Posted 2021-04-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SEO友好的React-Redux应用程序相关的知识，希望对你有一定的参考价值。

React应用程序动态地呈现组件，因此它使搜索引擎无法对页面编制索引，并使社交共享变得复杂。处理此类问题的最佳做法是什么，并使React-Redux应用程序对SEO友好？

答案

我们需要服务器端渲染来为React App做SEO！

让我们将应用程序的体系结构分为三个部分：一个提供数据的API服务器，一个与客户端共享代码的Web服务器，还提供html，最后是客户端，即在浏览器中运行的代码。

基本上，服务器端呈现将允许您的部分代码首先在您的Web服务器上运行。这意味着服务器将首先从您的API获取在初始页面的HTML上呈现所需的数据，然后它将打包并将此数据作为HTML发送到客户端。

在客户端获取初始页面HTML和所需数据后，它将继续整个javascript呈现业务，但它已经拥有所有必需的数据。因此，使用上面的小例子，客户端渲染SPA必须从头开始，但服务器端渲染SPA将处于他们已经拥有所有数据的起始点。因此，这解决了SEO和缓慢的SPA初始加载问题。

这似乎是一个相当直观的想法，但是当React问世时，它才更加认真，因为React允许您以优雅的方式进行服务器端渲染。

总而言之，服务器端呈现可以分为3个步骤：

（1）获取渲染初始加载页面所需的数据。

（2）使用此数据渲染HTML。

（3）打包HTML并将其发送到客户端。

以上是关于SEO友好的React-Redux应用程序的主要内容，如果未能解决你的问题，请参考以下文章