您现在的位置是:网站首页> 内容页

react-ssr

  • 金佰利官网首页
  • 2019-09-27
  • 307人已阅读
简介为什么使用SSR与传统SPA(Single-PageApplication-单页应用程序)相比服务器端渲染(SSR)的优势主要在于:更好的SEO,由于搜索引擎爬虫抓取工具可

为什么使用SSR

与传统 SPA(Single-Page Application - 单页应用程序)相比

服务器端渲染(SSR)的优势主要在于:

更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里,同步是关键。如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再行抓取页面内容。也就是说,如果 SEO 对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题。  更快的内容到达时间(time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验,并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言,服务器端渲染(SSR)至关重要。

使用服务器端渲染(SSR)时还需要有一些权衡之处:

开发条件所限。浏览器特定的代码,只能在某些生命周期钩子函数(lifecycle hook)中使用;一些外部扩展库(external library)可能需要特殊处理,才能在服务器渲染应用程序中运行。涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同,服务器渲染应用程序,需要处于 Node.js server 运行环境。更多的服务器端负载。在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集),因此如果你预料在高流量环境(high traffic)下使用,请准备相应的服务器负载,并明智地采用缓存策略。  

具体流程

1、webpack打包生成bundle.js并注入生成的html模板

webpack会从入口index.js将内容打包为一个bundle.js文件然后注入到html模板中,通常将该模板放在app的view中以供node渲染。

2、babel将src文件夹中的内容转换为node能识别的内容

因为src中的jsx所用的import和export等node不能识别,需要被转换成required。被转换后的内容放在dist文件夹中。

3、用户访问某路径时将该页面renderToString后的结果注入进相关html模板

// www.test.com/showawait this.ctx.renderSSR("show.html", { App, rootReducer, initState, useRem: true });node读取dist中show的app.js(之前是app.jsx)node获取后端数据将后端数据作为初始数据传入reducer并生成store,通过Provie传入<App />将<App />通过renderToString生成字符串注入html模板将拿到的初始数据作为window._init_data传到前端

<div id="app">{{ stringData || "" }}</div><script>window._initData={{ initData || "" }}</script><script src="bundle.js"></script>将该模板响应给浏览器

4、前端render

浏览器拿到html开始从头解析,将之前的字符串模板渲染成DOM。执行到最后有一个bundle.js然后进入src的index.js执行ReactDOM.render,render的时候会采用diff算法和之前渲染成功的DOM做比对。前端用全局的_init_data来作为初始化数据传入reducer生成客户端store,之后的action都在前端做,和后端的redux没关系了。 

总结

如果是spa的话那么是这样的:

<div id="app"></div><script src="bundle.js"></script> 我们的页面是不支持SEO的,因为该页面被响应到了浏览器之后再由浏览器解析js动态生成页面。为了支持SEO,我们应该在服务器端通过renderToString方法将页面的主屏内容生成字符串插入id为app的div里。将页面的初始数据通过全局变量传入,类似这样:

<div id="app">{{ stringData || "" }}</div><script>window._initData={{ initData || "" }}</script><script src="bundle.js"></script> 通过这样的方式可以实现SEO,但是仅仅是支持首屏SEO。如果我们有前端路由跳转,那么路由跳转后的页面时不能被SEO的,所以我们要这样:

// nodeapp.get("/index|/login|/rules", controller.index.rend); 当用户通过h5方式做跳转时,每次访问的url都返回同一个html,可以达到每一个路由的SEO。

文章评论

Top