认识达内从这里开始

web前端编程开发随着互联网的不断发展而被越来越多的程序员掌握，今天我们就通过案例分析来简单了解一下，web前端开发程序员需要掌握哪些渲染方式。

CSR-ClientSideRendering-客户端渲染

CSR就是我们常见的SPA所使用的渲染方式，所有的主流框架都支持，或者说：只要是在客户端渲染过程中使用到了脚本都可以算作客户端渲染。

浏览器加载页面

加载对应的脚本

脚本执行时向页面中渲染内容，此步骤一般包含两种方式：

向一个空节点中渲染内容，一般应用于纯粹的CSR应用。这里使用的就是上面提到的挂载组件的功能。

向一个已有内容的节点中渲染内容，通常应用于CSR与其它渲染模式(SSR、SSG、ISR)结合的场景下

CSR的使用场景定义也很简单，如果在客户端页面有动态需求或需要交互则必须使用。

SSR-ServerSideRendering-服务端渲染

SSR是另一个比较常见的渲染模式，使用这种渲染模式可以从服务端直接返回要渲染的静态内容。

浏览器发起HTTP请求对应的页面

服务端接收到请求后准备渲染页面所需要的数据

将所需要的数据传入需要渲染的页面组件中然后通过renderToString输出为静态内容

拼接页面模版、水合脚本等将生成的静态内容返回到浏览器，浏览器进行渲染

浏览器渲染内容，执行水合脚本恢复页面交互和动态能力

纯粹的SSR指代的接收到请求、输出静态内容、返回浏览器的模式。水合的相关部分是属于CSR的内容。

要注意水合并不是必须的，可以按需选择。比如如果你的需求是要对不同的用户展示不同的页面，然而页面上并没有任何可以交互或动态的内容，那完全可以忽略水合的部分。

SSR一般应用于以下场景：

出于页打开速度、用户体验、SEO等目的需要让用户更快的看到页面屏内容

想要预先渲染的页面内容中存在动态的内容

SSG-StaticSiteGeneration-静态站点生成

SSG现在也比较常见，它所指代的是在构建阶段就将页面所需要的数据准备好然后将需要的页面通过脚本构建为静态内容的模式。

在构建阶段构建脚本遍历所有需要静态构建的页面

获取渲染所需要的数据并通过renderToString输出为静态内容

将静态内容拼接页面模版和水合脚本等内容后保存到文件中

浏览器发起请求时从服务端返回静态页面(一般直接使用静态文件服务器即可)

浏览器渲染内容，执行水合脚本恢复页面交互和动态能力

纯粹的SSG指代的同样是不包含CSR部分的内容，即构建阶段生成静态页面并在请求时直接将静态页面返回的过程。水合过程同样不是必须的，视需求决定即可。

SSG一般应用于以下场景：

出于页打开速度、用户体验、SEO等目的需要让用户更快的看到页面屏内容

页面中基本都是静态内容，变动很少或变动的时机比较固定

所以常用于通过CMS生成内容、博客站点等静态内容较多的场景。

ISR-IncrementalStaticRegeneration-增量静态再生

ISR目前使用的不多，它算是SSG的一种增强版，指的是在SSG的基础上，服务端在收到页面请求时会对页面的时效性进行判断，如果认定失效则会对该页面进行增量构建的一种模式。

可以看出ISR在构建和客户端环节没有任何的变化，而是增加了Server端的逻辑：

在服务端收到对应页面请求时服务端会先返回当前内容然后对页面做失效验证

如果页面实现，服务端会对失效的页面进行后台增量构建

当下次请求到达时如果新的页面已经生成成功则会返回新页面的内容，但在此之前还会继续使用旧页面的内容

当然上述的逻辑并不绝对，先增量构建再返回也同样是ISR，只是一般这样会影响到用户体验一般不推荐。

ISR适用的场景是：

网站匹配SSG场景

但对页面有一定的实时性要求

比如说天气预报页面，可能半小时更新一次即可，或者是新闻页面，在存在新数据时再进行增量构建也是一种解决方案。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加抖音太原达内IT培训学习了解。