React SSR的探索学习

biaoblog.cn 个人博客

发布于 2022-08-11 19:38:58

2K00

代码可运行

文章被收录于专栏：web技术开发分享web技术开发分享

运行总次数：0

代码可运行

找了很多开源的react SSR 项目都不算稳定，

最重选择了：react-koa2-ssr

项目搭建成功之后配置了一下路由发现报错：

BorwserRouter out must have a Dom

大概意思就是说我们用的BorwserRouter需要外面加一个标签dom

解决方案：

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App.jsx";
import * as serviceWorker from "./serviceWorker";

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

server/app.js

import { StaticRouter} from "react-router-dom";
     ctx.response.body = shtml.replace(
        "{{root}}",
        renderToString(
          <StaticRouter>
            <App />
          </StaticRouter>
        )
      );

完事就可以了

配置的参考文档：

https://zhuanlan.zhihu.com/p/52693113

（参考其中的相关配置，但用的是https://github.com/Bill-Pang/react-koa2-ssr）

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react