如何使用 CRA 为已构建的 react 应用程序实施 SSR？答案

【问题标题】：How to implement SSR for an already built react app with CRA?如何使用 CRA 为已构建的 react 应用程序实施 SSR？
【发布时间】：2019-10-26 10:00:00
【问题描述】：

我们已经使用 CRA 和路由器构建了一个 react 应用。我们希望在其上实施 SSR，以便我们可以获得适当的 SEO 和社交媒体支持。我已经看到并尝试了许多可用的技术，但这些技术似乎都不起作用。

我们以这样一种方式制作我们的应用程序，其中很多实际上依赖于浏览器才能正常工作，例如window 对象。一种技术（某种）有效，但在服务器端运行代码会出现错误；

ReferenceError: 'window' is not defined

我们要实施 SSR 的主要原因是网站的 SEO 和社交媒体识别。我们正在动态添加元标签（使用 React Hemlet），因此 facebook、twitter 等无法获取标签。

所以现在的问题是；

是否有合适的方法在已构建的反应站点上实施 SSR？
我们可以使用任何替代方案吗？该站点有大量从远程 API 端点获取的资源，因此预渲染不是一种选择。

【问题讨论】：

标签： javascript reactjs babeljs router server-side-rendering

【解决方案1】：

您始终可以在构建的反应站点上实施 SSR。您将保持组件不变。

但是，您可能需要在应用程序的入口点进行修改。此外，您还需要在您的应用程序中创建一个嵌入式服务器，这将是您的 SSR。

为此，您需要进行自己的 webpack 配置。

你可能需要一个开发者；）

【讨论】：

我创建并嵌入了一个小型服务器，并通过适当的配置更改了入口点。问题是现在我们不能使用依赖于浏览器的东西；比如获取 URL 的一部分或 window 和 document 对象。由于 SSR，它会尝试事先渲染站点。如何解决这个问题？
请给我一个 Github star 兄弟github.com/tomtom94/react-easy-ssr

【解决方案2】：

如果您因为 SEO 而需要 SSR。我想使用 Prerender https://prerender.io/ 。这个让我们的网站支持 SEO，即使它是由 React 构建的。

【讨论】：

【解决方案3】：

除了第一个答案，SSR 不执行 useEffect()、componentDidMount() 和 componentDidUpdate()。但是，SSR 会执行 render()。因此，需要一些时间将 window 和 document 从 render() 移动到 useEffect()、componentDidMount() 或 componentDidUpdate()。

如果这些对象在第三方依赖项中使用，请不要在服务器端导入它们。相反，在服务器端渲染其他东西（例如 ComponentA），然后在客户端，使用 React lazy 的动态导入来渲染第三方组件，并将回退设置为 ComponentA。例如：

// import ThirdPartyComponent from "some-third-party-package"; /* remove this */

const { IS_SERVER_SIDE } = process.env;

const ServerSideComponent = () => <div>This is server side component</div>;
let ThirdPartyComponent;
if (!IS_SERVER_SIDE) {
  ThirdPartyComponent = React.lazy(() => import("some-third-party-package"));
}

class YourPage extends React.Component {
  render() {
    if (IS_SERVER_SIDE || !ThirdPartyComponent) {
      return <ServerSideComponent />;
    }
    
    return (
      <React.Suspense fallback={<ServerSideComponent />}>
        <ThirdPartComponent />
      </React.Suspense>
  }
}

【讨论】：

【解决方案4】：

如果您使用的是快速服务器，您可以尝试 SSR For bots middleware ssr-for-bots 我在遇到同样的问题后实现了它，我想要 SSR 只是因为 SEO。

【讨论】：