Question

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

我们制作应用程序的方式实际上取决于浏览器的正常运行，例如window对象。一种（某种）可行的技术，但是在服务器端运行代码会出现错误；

ReferenceError: 'window' is not defined

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

所以现在的问题是

是否存在在已构建的React站点上实施SSR的正确方法？
我们可以使用其他替代方法吗？该站点具有从远程API端点获取的大量资源，因此无法进行预渲染。

Answer 1

您始终可以在内置的React网站上实施SSR。您将使组件保持不变。

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

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

您可能需要一个开发人员；）

Answer 2

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

Answer 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>
  }
}

Answer 4

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

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

4 个答案: