渐进式网络应用程序（PWA）与服务端渲染（SSR）

1、渐进式网络应用程序（PWA）

• 什么是渐进式网络应用程序？
  是一种普通网页或网站架构起来的网络应用程序，但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。

• 渐进式网络应用程序的例子？
  在浏览器总正常打开该网站，右上角添加主屏幕，然后回到桌面中打开该程序，会有独立app的体验。
  参考一款支持PWA的网站：https://oi-wiki.org/

• PWA的原理是什么？
  他牵扯到两个关键文件。

  • manifest.json
    这个严格意义上来说，与离线的关系不大，更确切的讲，他是手机上用到的关键。
    让你的网页可以具有类似App的效果，比如logo，启动页面等等。
  • sw.js
    这个js命名随便，只是说其功能叫Service Workers，所以习惯写作sw.js。
    让你的Web App离线使用的关键js配置。

• 参考资料：
  https://zhuanlan.zhihu.com/p/40236256

2、服务端渲染（SSR）

1、浏览器（客户端）渲染

• 浏览器端渲染 (CSR)
  页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。
• 客户端渲染优点：
  使得服务器计算压力变轻
  做到了前后端分离，在团队开发中只要负责各自的任务即可，使开发效率有明显提升。
• 客户端渲染缺点：
  不利于SEO、搜索引擎爬虫看不到完整的程序源码
  请求增多时用户等待时间变长，导致首屏渲染慢
  消耗的是用户浏览器的性能

2、服务器（服务端）渲染

• 服务器端渲染 (SSR)
  页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
• 服务端渲染优点：
  响应快，用户体验好，首屏渲染快
  对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO
  服务端渲染缺点：
  增加了服务器的计算压力，消耗服务器性能
  不容易维护，如果不使用node中间层，前后端分工不明，不能进行良好的并行开发

3、两种渲染对比

• 本质上两种渲染都是一样的，都是进行的字符串拼接生成html,两者的差别最终体现在时间消耗以及性能消耗上。
• 客户端在不同网络环境下进行数据请求，客户端需要经历从js加载完成到数据请求再到页面渲染这个时间段。导致了大量时间的消耗以及浏览器性能的消耗。
• 而服务端在内网请求，数据响应快，不需要等待js代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能。客户端页面响应时间也更快。

4、如何使用服务端渲染

• 基于react框架的服务端渲染开发推荐使用Next.js框架，Next.js 是一个轻量级的 React 服务端渲染应用框架。基于Next.js 是一个轻量级的 React 服务端渲染应用框架。
• 基于vue框架的服务端渲染开发推荐使用Nuxt.js框架. Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

3、PWA与SSR的关系

• pwa的缺陷：
  当新用户首次加载或用户清除浏览器缓存之后进入页面，这时是没有缓存资源的，这样的情况下明显就没有那么流畅的体验了。
• ssr的辅助：
  这个页面无论是首次加载还是二次打开，都会变得十分流畅。

文章来源: gwj1314.blog.csdn.net，作者：小哈里，版权归原作者所有，如需转载，请联系作者。

原文链接：gwj1314.blog.csdn.net/article/details/122800091