SEO 友好的 React-Redux 应用程序答案

【问题标题】：SEO-friendly React-Redux appSEO 友好的 React-Redux 应用程序
【发布时间】：2017-04-28 04:02:12
【问题描述】：

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

【问题讨论】：

标签： reactjs seo redux

【解决方案1】：

老问题，我肯定会用Next.js。

Next.js 成为构建 React 应用程序的事实标准之一。每个页面都默认呈现 SSR，因此使其 100% 对 SEO 友好。

【讨论】：

【解决方案2】：

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

让我们将应用程序的架构分为三部分：提供数据的 API 服务器，与客户端共享代码并呈现 HTML 的 Web 服务器，最后是客户端，即在浏览器中运行的代码.

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

客户端拿到初始页面HTML和需要的数据后，会继续整个JavaScript渲染业务，但是已经拥有了所有需要的数据。因此，使用上面的小示例，客户端渲染 SPA 必须从头开始，但服务器端渲染 SPA 将处于他们已经拥有所有数据的起点。因此，这解决了 SPA 共享的 SEO 和缓慢的初始加载问题）。

这似乎是一个相当直观的想法，但只是在 React 出现时才被认真对待，因为 React 允许您以优雅的方式进行服务器端渲染。

总结起来，服务端渲染可以分为3个步骤：

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

(2) 使用此数据呈现 HTML。

(3) 将HTML打包发送到客户端。

【讨论】：