9-1 9.1.1熟知服务器端渲染和客户端渲染的基本概念ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

9-1 9.1.1 熟知服务器端渲染和客户端渲染的基本概念教学课件 Vue.js基础与应用开发实战（微课版）9.1.1 熟知服务器端渲染和客户端渲染的基本概念在互联网早期，前端页面都是一些简单的页面，那么前端页面都是后端将HTML拼接好，然后将它返回给前端完整的HTML文件。浏览器获取这个HTML文件之后就可以直接显示了，这就是我们所谓的服务器端渲染。例如典型的java+velocity、node+jade进行HTML模板拼接及渲染。而随着前端页面复杂性越来越高，前端就不仅仅是页面展现了，还有可能需要添加更多复杂功能的组件。随着ajax的兴起，就逐渐出现前端开发这个行业，前后端分离就变得越来越重要。因此这个时候后端它就不提供完整的HTML页面，而是提供一些API接口，返回一些JSON数据，我们前端拿到该JSON数据之后再使用HTML对数据进行拼接，然后展现在浏览器上。这种方式就是客户端渲染了，因此前端可以专注于UI的开发，后端专注于逻辑的开发。1同构服务器渲染的Vue.js应用程序也可以被认为是“同构”或“通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行,即同一套代码既可以在服务器端渲染，也可以在客户端渲染。当我们首次访问时，换言之当我们访问首屏页面时，使用服务器端渲染，为我们返回已经渲染完成的最终HTML页面，这样就同时解决了首屏白屏问题以及SEO问题。首屏页面访问完成后，当我们再进行交互时，则使用客户端渲染，HTML、CSS、JS等资源都不需要再重新请求，只需要通过ajax/websocket等途径获取数据，在客户端完成渲染过程。1同构一个服务端渲染的同构Web应用架构图大致如图9-1所示，得力于Node.js的发展与流行，Javascript成为了一门同构语言，这意味着我们只需写一套代码，可以同时在客户端与服务端执行。图图9-1 “同构同构”Web应用架构示意图应用架构示意图2前端渲染前端渲染的方式起源于JavaScript的兴起，Ajax更是让前端渲染更加成熟，前端渲染真正意义上的实现了前后端分离，前端只专注于UI的开发，后端只专注于逻辑的开发，前后端交互只通过约定好的API来交互，后端提供JSON数据，前端循环JSON生成DOM插入到页面中去。2前端渲染以Vue为例，我们查看生产环境的页面的HTML源码，如下所示：Vue2前端渲染 其实，这个就是浏览器从服务器端获取到的html。这里只有入口，以及引入一系列的JS文件。其实，我们看到的页面就是由这些JS代码渲染出来的，这就是前端渲染。3客户端渲染（CSR）客户端渲染（是Client Side Render，简称为CSR），即传统的单页面应用（Single-Page Application，SPA）模式，Vue.js构建的应用程序默认情况下是一个HTML模板页面，只有一个id为app的根容器，然后通过Webpack打包生成CSS、JS等资源文件，浏览器加载、解析来渲染HTML。3客户端渲染（CSR）客户端渲染的数据是由浏览器通过AJAX请求动态取得，再通过JS将数据填充到DOM元素最终展示到网页中。页面上的内容是加载的JS文件渲染出来的，JS文件运行在浏览器上面，服务端只返回一个HTML模板。（1）客户端渲染模式下，服务端把渲染的静态文件给到客户端，客户端获取服务端发送过来的文件再运行一遍JS代码，根据JS的运行结果，生成相应DOM，然后渲染给用户。3客户端渲染（CSR）（2）HTML仅仅作为静态文件，客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端，然后根据HTML上的JavaScript文件，生成DOM插入HTML。在客户端渲染时，一般使用的是webpack-dev-server插件，它可以帮助用户自动开启一个服务器端，主要作用是监控代码并打包，也可以配合webpack-hot-middleware来进行热更替（HMR），这样能提高开发效率。4服务器渲染（SSR）服务器端渲染（Server Side Render，简称为SSR)：顾名思义就是将页面或者组件通过服务器生成HIML字符串，将它们直接发送到浏览器，最后将静态标记“混合”为客户端上完全交互的应用程序。整个渲染过程，是在服务器端执行，浏览器只负责去展示。即页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML就可以了。也就是说网页的HTML一般是后端服务器里通过模板引擎渲染好后再交给前端的。4服务器渲染（SSR）服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成HTML字符串，然后把它返回给客户端。客户端获取的内容是可以直接渲染然后呈现给用户的HTML内容，不需要为了生成DOM内容自己再去运行一遍JS代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在html源文件里也能找到。Vue SSR利用Node.js搭建页面渲染服务，在服务端完成页面的渲染（把以前需要在客户端完成的页面渲染放在服务器端来完成），便于输出SEO更友好的页面。4服务器渲染（SSR）Vue进行服务器端渲染时，需要利用Node.js搭建一个服务器，并添加服务器端渲染的代码逻辑。使用webpack-dev-middleware中间件对更改的文件进行监控，使用wbpack-hot-middleware中间件进行页面的热更新，使用vue-server-rendrere插件来渲染服务器端打包的bundle文件到客户端。5服务器端渲染和客户端渲染的区别？服务器端渲染和客户端的渲染的本质区别是谁来渲染HTML页面，如果HTML页面在服务器端那边拼接完成，那么它就是服务器端渲染，而如果是前端做的HTML拼接及渲染的话，那么它就属于客户端渲染的。5服务器端渲染和客户端渲染的区别？其实前后端的渲染本质是一样的，都是字符串的拼接，将数据渲染进一些固定格式的HTML代码中，形成最终的HTML代码展示在用户页面上。因为字符串的拼接必然会损耗一些资源，如果在服务器端渲染，那么消耗的就是服务器端的资源。如果是在客户端渲染，常见的手段，比如是直接生成DOM插入到HTML中，或者是使用一些前端的模板引擎等。他们初次渲染的原理大多是将原HTML中的数据标记（例如text）替换。5服务器端渲染和客户端渲染的区别？在前后端分离的项目中，前端部分需要先加载静态资源，再采用异步的方式去获取数据，最后来渲染页面。其中，在获取静态资源和异步获取数据阶段，页面上是没有数据的，这将会影响首屏的渲染速度和用户体验。服务器渲染解析HTML模板的工作是交给服务器端完成的，客户端只需要解析标准的HTML页面即可，这样客户端占用的资源会变少。7何时使用服务器端渲染、何时使用客户端渲染呢？对于我们常见的后端系统页面，交互性强，不需要考虑SEO搜索引擎的，我们只需要客户端渲染就好。对于一些企业网站，没有很多复杂的交互型功能，并且需要很好的SEO（因为需要通过百度搜索到官网）和更好的用户体验，因此需要服务器端渲染。服务器渲染对于SEO性能是非常友好的，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，SSR具有更快的内容到达时间（time-to-content），可以带来更好的用户体验，因为无需等待所有的JavaScript都完成下载并执行，才显示服务器渲染的标记，所以用户将会更快速地看到完整渲染的页面。通常对于那些“内容到达时间”要求是绝对关键指标的应用程序而言，服务器端渲染至关重要，可以用SSR来实现最佳的初始加载性能。7何时使用服务器端渲染、何时使用客户端渲染呢？另外还需要考虑的是，比如App里面的功能，首页性能很重要，比如淘宝官网等这些都需要做服务器渲染的。在对应用程序使用服务器端渲染之前，应该问的第一个问题是，是否真的需要它。这主要取决于内容到达时间（time-to-content）对应用程序的重要程度。例如，如果正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染将是一个小题大作之举。然而，内容到达时间要求是绝对关键的指标，在这种情况下，服务器端渲染可以帮助用户实现最佳的初始加载性能。如果网站对SEO（搜索引擎优化）要求比较高，页面又是通过异步来获取内容，则需要使用服务器渲染来解决此问题。8怎么判断一个网站是不是服务器渲染？打开一个网站的首页，然后查看网页源代码，可以看到与网页内容相关的HTML代码，就是服务器渲染的。例如Vue.js官网（网址为https:/cn.vuejs.org/）就属于服务器端渲染，HTML内容都是服务器端拼接完成后返回到客户端的。看到与网页内容相关的HTML代码，大部分代码是加载JS文件就是客户端渲染，例如http:/h5.ele.me/msite/这个网站就是客户端渲染，页面内容都是由JS动态渲染的。9使用SSR需要权衡之处使用服务器端渲染（SSR）时还需要有一些权衡之处：（1）开发条件所限一 些 浏 览 器 特 定 的 代 码，只 能 在 某 些 生 命 周 期 钩 子 函 数（lifecycle hook）中使用；一些外部扩展库（external library）可能需要特殊处理，才能在服务器渲染应用程序中运行。9使用SSR需要权衡之处（2）涉及构建和部署的更多要求与可以部署在任何静态文件服务器上的完全静态单页面应用程序（SPA）不同，服务器渲染应用程序，需要处于Node.js Server运行环境。（3）更多的服务器端负载在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件的Server更加大量占用CPU资源（CPU-intensive-CPU 密集），因此如果能预料在高流量环境（high traffic）下使用，则需准备相应的服务器负载，并明智地采用缓存策略。10预渲染（Prerendering）如果使用服务器端渲染（SSR）只是用来改善少数营销页面（例如关于我们页面、联系我们页面等）的SEO，那么使用预渲染就可以了。无需使用Web服务器实时动态编译HTML，而是使用预渲染方式，在构建时（build time）简单地生成针对特定路由的静态HTML文件。其优点是设置预渲染更简单，并可以将前端作为一个完全静态的站点。如果使用Webpack，可以使用prerender-spa-plugin轻松地添加预渲染，它已经被Vue应用程序广泛应用。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！