React服务器渲染最佳实践
源码地址:https://github.com/skyFi/dva-starter
React服务器渲染最佳实践
dva-starter
完美使用 dva react react-router,最好用的ssr脚手架,服务器渲染最佳实践
欢迎 Fork ,Issue 交流各种想法
- 努力在最佳的路上,不断完善,建议star或watch.
- 有想法就Fork, Pull requests ,我很耐 操.
Usage
安装redis
$ brew install redis
启动redis
$ brew services start redis
准备配置文件
- 将config.example.js拷贝一份config.js并修改为你想要的配置
- 共两个地方
运行
'production': $ npm run start
'development': $ npm run dev
服务器渲染需要的initData
对于服务器渲染需要获取的数据,放置的model中的initData中,结构和effects一样,也一样可以在页面中像调用effects一样调用,你所需要关心的仅仅是哪些数据需要首屏出现,把它从effects中移到initData中即可,其他的你都不需要关心了,是不是很爽,哇哈哈
export default ModelHelper({
namespace: 'user',
state: [
{
list: undefined,
}
],
reducers: {
list(state, { list }) {
return { ...state, list };
},
},
effects: {
*fetchTodoList(action, { call, put }) {
const res = yield call(fetchTodoList);
if (res) {
yield put({
type: 'list',
list: res
});
} else {
throw new Error(`Init data Error: fetchTodoList.`);
}
},
},
initData: {
*fetchAnotherList({}, { call, put }) {
const res = yield call(fetchAnotherList);
if (res) {
yield put({
type: 'list',
list: res
});
} else {
throw new Error(`Init data Error: fetchAnotherList.`);
}
},
},
})
魔法全局变量initialState的消失
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<div id="root">
<div>
<div data-reactroot="" data-reactid="1" data-react-checksum="-35862160"><div data-reactid="2"><h1 data-reactid="3"><!-- react-text: 4 -->App _ <!-- /react-text --><!-- react-text: 5 --><!-- /react-text --></h1><h3 data-reactid="6">About</h3><h3 data-reactid="7">点我试试</h3><h2 class="title" data-reactid="8">User</h2><div data-reactid="9"><!-- react-text: 10 -->- <!-- /react-text --><!-- react-text: 11 -->周静<!-- /react-text --></div><div data-reactid="12"><!-- react-text: 13 -->- <!-- /react-text --><!-- react-text: 14 -->侯军<!-- /react-text --></div><div data-reactid="15"><!-- react-text: 16 -->- <!-- /react-text --><!-- react-text: 17 -->郭超<!-- /react-text --></div><div data-reactid="18"><!-- react-text: 19 -->- <!-- /react-text --><!-- react-text: 20 -->乔涛<!-- /react-text --></div><div data-reactid="21"><!-- react-text: 22 -->- <!-- /react-text --><!-- react-text: 23 -->杨超<!-- /react-text --></div><div data-reactid="24"><!-- react-text: 25 -->- <!-- /react-text --><!-- react-text: 26 -->万娟<!-- /react-text --></div><div data-reactid="27"><!-- react-text: 28 -->- <!-- /react-text --><!-- react-text: 29 -->何超<!-- /react-text --></div><div data-reactid="30"><!-- react-text: 31 -->- <!-- /react-text --><!-- react-text: 32 -->戴秀兰<!-- /react-text --></div><div data-reactid="33"><!-- react-text: 34 -->- <!-- /react-text --><!-- react-text: 35 -->孙秀英<!-- /react-text --></div><div data-reactid="36"><!-- react-text: 37 -->- <!-- /react-text --><!-- react-text: 38 -->邹超<!-- /react-text --></div><div data-reactid="39"><!-- react-text: 40 -->- <!-- /react-text --><!-- react-text: 41 -->苏刚<!-- /react-text --></div><div data-reactid="42"><!-- react-text: 43 -->- <!-- /react-text --><!-- react-text: 44 -->毛刚<!-- /react-text --></div><div data-reactid="45"><!-- react-text: 46 -->- <!-- /react-text --><!-- react-text: 47 -->萧丽<!-- /react-text --></div><div data-reactid="48"><!-- react-text: 49 -->- <!-- /react-text --><!-- react-text: 50 -->胡勇<!-- /react-text --></div><div data-reactid="51"><!-- react-text: 52 -->- <!-- /react-text --><!-- react-text: 53 -->毛刚<!-- /react-text --></div><div data-reactid="54"><!-- react-text: 55 -->- <!-- /react-text --><!-- react-text: 56 -->贺强<!-- /react-text --></div></div></div>
</div>
</div>
<script type="text/javascript" src="/states/YT50C6TStrTsitaHF0gwkxpyslhAYJAZ1489673610988.js"></script>
<script src="/index.js"></script>
</body>
</html>
最初版本采用了一个全局变量initialState来将服务器渲染时获得的初始化states同步到客户端初始化的states,这个方法有个弊端,
第一,暴漏个全局的变量,不爽;
第二,不够优雅;
第三,使得html页面拥有大段大段的script,这会降低你的网站在百度的权重!。
所以,这里将states放到了一个redis中缓存,避免了一些问题,但,伟大的同性交流平台啊,这一定有更好的解决办法,如果有,那你一定要告诉我,翘首期盼之!!
目前最佳方案:
- 缓存住准备好的初始化states
module.exports.set = function *(stateString) {
const key = randomstring.generate() + Date.now();
yield cache.setexAsync(`${cache.prefix}:state:${key}`, EXPIRE, stateString);
return key;
};
- 页面加载
<script type="text/javascript" src="/states/${stateKey}.js"></script>
- 路由截取
app.use('/states/(:key).js', stateServe);
- 页面同步states
const app = createApp({
history: browserHistory,
initialState: JSON.parse(window.states),
}, { router, models });
- 删除states
delete window.states;
最后,如果你有更好的解决方案,请一定要告诉我,不甚感激!
React服务器渲染最佳实践的更多相关文章
- 腾讯优测优分享 | 探索react native首屏渲染最佳实践
腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...
- 探索react native首屏渲染最佳实践
文 / 腾讯 龚麒 0.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react n ...
- React 服务器渲染原理解析与实践
第1章 服务器端渲染基础本章主要讲解客户端与服务器端渲染的概念,分析客户端渲染和服务器端渲染的利弊,带大家对服务器端渲染有一个粗浅认识. 1-1 课程导学1-2 什么是服务器端渲染1-3 什么是客户端 ...
- 我们编写 React 组件的最佳实践
刚接触 React 的时候,在一个又一个的教程上面看到很多种编写组件的方法,尽管那时候 React 框架已经相当成熟,但是并没有一个固定的规则去规范我们去写代码. 在过去的一年里,我们在不断的完善我们 ...
- 《React设计模式与最佳实践》笔记
书里的demo都是15.3.2以下版本的,有些demo用最新的react 16.x版本会报错,安装包的时候记得改一下版本 第一章 React 基础 命令式编程描述代码如何工作,而声明式编程则表明想 ...
- React 代码共享最佳实践方式
任何一个项目发展到一定复杂性的时候,必然会面临逻辑复用的问题.在React中实现逻辑复用通常有以下几种方式:Mixin.高阶组件(HOC).修饰器(decorator).Render Props.Ho ...
- 编写React组件的最佳实践
此文翻译自这里. 当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我( ...
- React项目的最佳实践
项目代码 从零开始简书项目 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...
- react性能优化最佳实践
1.PureComponent 的使用场景 PureComponent 和 Component 的区别是,PureComponent 自带 shouldComponentUpdate 生命周期函数,会 ...
随机推荐
- Objective-C日记-之类别Category
类别Category 1,概述 为现有类添加新的方法,这些新方法的Objective-C的术语为“类别”. 2,用法 a,声明类别 @interface NSString(NumberConvenie ...
- ACM 树形数组
树状数组(Binary Indexed Tree(BIT), Fenwick Tree)是一个查询和修改复杂度都为log(n)的数据结构.主要用于查询任意两位之间的所有元素之和,但是每次只能修改一个元 ...
- Java反射机制深度剖析
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! Java反射机制是Java语言中一种很重要的机制,可能在工作中用到的机会不多,但是在很多框架中都有用到这种机制.我们知道Java是一门静态 ...
- Internal Server Error with LAMP
文章出自:http://blog.csdn.net/lipei1220/article/details/8186406 我的问题: 500 添加 .htaccess 后刷新网页就出现错误. 原因为 ...
- 从 Spring 2.5 开始就可以使用注解来配置依赖注入,而不是采用 XML 来描述一个 bean。
1.在 XML 注入之前进行注解注入,因此后者可以被前者重写. 2.在默认情况下注解在 Spring 容器中不打开,需要配置启动. <beans xmlns="http://www.s ...
- Apache Flume日志收集系统简介
Apache Flume是一个分布式.可靠.可用的系统,用于从大量不同的源有效地收集.聚合.移动大量日志数据进行集中式数据存储. Flume简介 Flume的核心是Agent,Agent中包含Sour ...
- rip路由协议 细节分析及实例配置【完整版】
rip路由协议 细节分析及实例配置[完整版] RIP呢,这是一个比较重要的知识点,所以它的知识覆盖面很广泛:但是呢,我将会对碰到的问题进行一些分析解刨(主要是为了帮助自己理清思维):也希望能够从中发现 ...
- (14)jdk1.5开始的一些新特性:静态导入,增强for循环,可变参数,自动装箱/拆箱,枚举类型
Jdk1.5新特性之静态导入 jdk1.5新特性值静态导入 静态导入的作用:简化缩写 静态导入的作用:可以作用一个类的所有静态成员. 静态导入的格式:import static 包名.类名.静态的成员 ...
- iPhone safari中Document事件不触发的解决方案 [冒泡]
写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){ //隐藏代码 }); 各大浏览器都没问题,唯独iPhone上的不会触发事件 ...
- Java 异常处理 try catch finally throws throw 的使用和解读(一)
//最近的一个内部表决系统开发过程中,//发现对异常处理还存在一些模棱两可的地方,//所以想着整理一下//主要涉及到://1.try catch finally throws throw 的使用和解读 ...