You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
SSR(Server Side Render) 是指服务端渲染,在我们 web 较早的时候,开发者喜欢使用 jsp、php 或者其他模板渲染引擎来构造一个应用,当客户端向服务器发出请求,然后运行时查询数据,模板填充,生成 html 内容并返回给客户端。
优点:
有利于 SEO,由于页面在服务器生成,搜索引擎直接抓取到最终页面结果。
有利于首屏渲染,html 所需要的数据都在服务器处理好,直接生成 html,首屏渲染时间变短。
缺点:
占用服务器资源,渲染工作都在服务端渲染。
用户体验不好,每次跳转到新页面都需要在重新服务端渲染整个页面,不能只渲染可变区域。
CSR
CSR(Client Side Rendering) 是指客户端渲染。顾名思义,就是在渲染工作在客户端(浏览器)进行,而不是在服务器端进行。举个例子,我们平时用 vue,react 等框架开发的项目,都是先下载 html 文档(不是最终的完全的 html),然后下载 js 来执行渲染出页面结果。
以 react 为例,客户端渲染初始化的 html 一般如下
<!DOCTYPEhtml><htmllang="en"><head><titledata-react-helmet="true">react app</title><noscript></noscript></head><body><noscript>
You need to enable JavaScript to run this app.
</noscript><divid="root"></div><scripttype="text/javascript"src="/static/js/bundle.js"defer=""></script><scripttype="text/javascript"src="/static/js/main.chunk.js"defer=""></script></body></html>
可以看出当前页面除了 <div id="root"></div> 元素,没有其他的元素,然后通过加载 bundle.js , main.chunk.js 来执行渲染。整个渲染过程包括,生成 DOM 节点,注入样式,交互事件绑定,数据获取等等。
优点:
前后端分离。前端专注于界面开发,后端专注于 api 开发,且前端有更多的选择性,可以使用 vue,react 框架开发,而不需要遵循后端特定的模板。
项目形态:SSR、CSR、SSG
SSR
SSR(Server Side Render) 是指服务端渲染,在我们 web 较早的时候,开发者喜欢使用 jsp、php 或者其他模板渲染引擎来构造一个应用,当客户端向服务器发出请求,然后运行时查询数据,模板填充,生成 html 内容并返回给客户端。
优点:
缺点:
CSR
CSR(Client Side Rendering) 是指客户端渲染。顾名思义,就是在渲染工作在客户端(浏览器)进行,而不是在服务器端进行。举个例子,我们平时用 vue,react 等框架开发的项目,都是先下载 html 文档(不是最终的完全的 html),然后下载 js 来执行渲染出页面结果。
以 react 为例,客户端渲染初始化的 html 一般如下
可以看出当前页面除了
<div id="root"></div>
元素,没有其他的元素,然后通过加载bundle.js
,main.chunk.js
来执行渲染。整个渲染过程包括,生成 DOM 节点,注入样式,交互事件绑定,数据获取等等。优点:
缺点:
SSG
SSG(Static Site Generation) 是静态站点生成,解析是在构建时执行的,当发出请求时,html 将静态存储,直接发送回客户端,相当于一个静态资源。SSG 这种渲染模式采取了 CSR 和 SSR 的共同优点,它不需要开发者介入服务器操作,开发者只需要准备 cdn 或者其他静态网页托管服务器,prerender 出静态资源这一步将在构建时就已经做了,呈现在用户眼前的虽然不是实时变更的,但是也保留了 CSR 和 SSR 的精髓,一定程度上有了平衡。但是因为 prerender 的缘故,它和 SSR 的大致工作方式会相似一点。
优点:
缺点:
静态资源组织:http 缓存、CDN
协商缓存一般可在服务端通过设置 Last-Modified、ETag 等 ResponseHeader 实现。(304 状态码,表示资源未发生变更,可使用浏览器缓存。)
强缓存一般可在服务端通过设置 Cache-Control:max-age、Expires 等 ResponseHeader 实现。
设置强缓存后,Network 大致变成了这样:
nuxt.config.js by fileNames 选项中更改此设置。
默认情况下为:
content-hash,与 hash、chunkhash 的区别:
publicPath: webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。
自定义 Jenkins 构建流程:shell 脚本
参考
The text was updated successfully, but these errors were encountered: