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

我们已经用CRA和路由器构建了react应用程序。我们想在它上实现SSR，这样我们就可以有适当的SEO和社交媒体支持。我已经看到并尝试了许多可用于此的技术，但这些技术似乎都不起作用

我们制作应用程序的方式是，很多应用程序实际上都依赖于浏览器才能正常工作，例如

窗口

对象。有一种技术（某种）是有效的，但在服务器端运行代码会产生错误

ReferenceError:未定义“窗口”

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

所以现在的问题是,

是否有适当的方法在已建成的react站点上实施SSR

我们有没有其他选择？该站点有大量从远程API端点获取的资源，因此预渲染不是一个选项

---

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

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

为此，您需要进行自己的网页包配置

---

为此，您可能需要一名开发人员；）

如果你因为SEO需要SSR。我想使用预渲染。这一个让我们的网站支持搜索引擎优化，即使它是由React建立的

如果您使用的是express server，您可以尝试SSR For bots中间件。我在遇到同样的问题后实现了它，我想要SSR只是因为SEO。

在第一个答案中，SSR不执行useffect（）、componentDidMount（）和componentDidUpdate（）。但是，SSR将执行render（）。因此，请花一些时间将

窗口

和

文档

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

//从“某个第三方包”导入第三方组件；//*去掉这个*/
const{IS_SERVER_SIDE}=process.env；
const ServerSideComponent=（）=>这是服务器端组件；
让第三方组成；
如果（！是服务器端）{
ThirdPartyComponent=React.lazy（（）=>import（“某些第三方包”）；
}
类YourPage扩展React.Component{
render（）{
如果（是服务器端第三方组件）{
返回；
}
返回(
}
}

我创建并嵌入了一个小型服务器，还通过适当的配置更改了入口点。问题是，现在我们无法使用依赖于浏览器的东西；例如获取URL的一部分或

窗口

和

文档

对象。由于SSR，它试图提前呈现站点。如何绕过他的？请给我一颗Github星