React SSR的探索学习

简介: React SSR的探索学习

找了很多开源的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(

<App />

,
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

作者: Bill 本文地址: http://biaoblog.cn/info?id=1631605948548

版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
|
3月前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
136 3
|
3月前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
42 10
|
3月前
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
40 3
|
3月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
11天前
|
前端开发 JavaScript 算法
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
28 6
|
4天前
|
前端开发 JavaScript API
React学习-初始化react项目
【8月更文挑战第16天】
|
7天前
|
移动开发 API UED
React-Router 基础学习
React-Router 基础学习
15 0
|
1月前
|
存储 前端开发 JavaScript
react hooks 学习进阶
【7月更文挑战第12天】 React Hooks(自16.8版起)让函数组件能处理状态和副作用。useState用于添加状态管理,useEffect处理副作用,useContext共享数据,useReducer处理复杂状态逻辑,useRef获取引用。进阶技巧涉及性能优化,如useMemo和useCallback,以及遵循规则避免在不适当位置调用Hooks。理解异步更新机制和结合Redux等库提升应用复杂性管理。持续学习新技巧是关键。
31 0
|
2月前
|
前端开发 JavaScript API
react next ssr
react next ssr