https://gitee.com/teambp/ScaffoldClient 这个地址下载对应源码。
1.服务端渲染是啥?就是在服务器进行页面渲染(废话),当页面展示后,显示的就是最终的页面。最简单的识别方式,你页面上的所有东西,在右键->查看源码后都可以看到(如果实现SEO的话)。
2.服务端渲染的好处1.SEO
2.首屏体验更好
3.整体APP的体验,因为是先缓存所有,再进行加载,没有额外的资源需要加载
3.文章做到了那一步首先,因为后台应用,所以并没有解决SEO的问题。。
如果要解决SEO的问题,我的思路是,把需要SEO的页面跳转都用window.location.href跳转,然后把需要渲染的东西放到initState里,然后页面上读取initState进行页面组装,渲染,如果有兴趣,大家可以自己实现以下,这样基本可以实现SEO。
然后,后台感觉非常的顺滑,因为所有页面控件都已经到js里面了,所以,跳转的时候,没有任何白屏,卡屏等等情况。这也是服务端渲染的优势。
其次,因为服务端渲染要用到node,这样,你的所有请求都可以先拦截一下做下处理,然后转发过去。
node层是一个非常好的,进行请求转发的层,可以避免很多问题。
最后,使用Node做服务端渲染可以更好的同构,这样客户端代码和渲染代码都在一个项目里,方便维护
4.使用了啥简单来说就是Node,React-Router V2/3, Express。
如果大家想知道V4版本的这么实现。。。我先自己实现了后,再写一篇告诉大家。
5.开始就不重新开项目了,
大家去码云上:https://gitee.com/teambp/ScaffoldClient
把这个项目Down下来,照着文章看就行了
我也只是简略说下主要代码
第一个重要的地方,入口,也就是webpack的入口
打包的入口
第二个,node层express注入ssr的拦截器
最关键的代码
isomorphism->CreateApp
export default function createApp(opts, isServer) {
var nowOption = ({
...createLoading({
effects: true,
}),
history: opts.history,
initialState: opts.initialState,
});
const app = dva(nowOption);
//加载模型
app.model(require('./models/authorities/user'));
if (isServer) {
//服务端渲染走
app.router(({ history, renderProps }) => {
return <RouterContext {...renderProps }
/>;
});
} else {
app.router(router);
}
return app;
}