（摘自前端渲染模式的探索）
也便是说，历经 SSR 到 CSR 的大变革之后，如今又从 CSR 出发去探索 SSR 的可能性……彷佛兜兜转转又回到了出发点，在这之间发生了什么？如今的 SSR 与当年的 JSP、PHP 又有什么差异？
一.SSR 大行其道
回到论坛、博客、谈天室仍旧火热的年代，行业最佳实践是基于 JSP、PHP、ASP/ASP.NET 的动态网站
以 PHP 为例：
<?php if ( count( $_POST ) ): ?><?php include WTG_INCPATH . '/wechat_item_template.php' ?><div style="..."> <div id="wechat-post" class="wechat-post" style="..."> <div class="item" id="item-list"> <?php $order = 1; foreach ( $_POST['posts'] as $wechat_item_id ) { echo generate_item_list( $wechat_item_id, $order ); $order++; } ?> </div> <?php $order = 1; foreach ( $_POST['posts'] as $wechat_item_id ) { echo generate_item_html( $wechat_item_id, $order ); $order++; } ?> <fieldset style="..."> <section style="..."> <p style="...">如果心中仍有疑问，请查看原文并留下评论噢。（<span style="font-size:0.8em; font-weight:600">特殊要紧的问题，可以直接微信联系 ayqywx</span> ）</p> </section> </fieldset></div><script> function refineStyle () { var post = document.getElementById('wechat-post'); // ul ol li var uls = post.getElementsByTagName('ul'); for (var i = uls.length - 1; i >= 0; i--) { uls[i].style.cssText = 'padding: 0; margin-left: 1.8em; margin-bottom: 1em; margin-top: -1em; list-style-type: disc;'; uls[i].removeAttribute('class'); }; } document.addEventListener('DOMContentLoaded', function() { refineStyle(); }); </script></div><?php endif ?>
（摘自ayqy/wechat_subscribers，一款用来自动天生微信"大众年夜众平台图文的 WordPress 插件）
这一期间网页内容完备由做事端渲染，客户端（浏览器）吸收到的是领悟了做事数据的 HTML，以及少量内联的（表单）交互逻辑和样式规则，支撑着早期大量动态网站的正是这种纯 SSR 模式
但随着技能实践的深入，这种模式逐渐暴露出了一些问题：
性能差：每一个要求过来都要重新实行一遍数据逻辑和视图逻辑，动态天生 HTML，即便个中很大一部分内容是相同的机器本钱高：Tomcat/Apache 等运用做事器的并发处理能力远不及nginx之类的 Web 做事器，因此须要支配更多的机器开拓/掩护难：前后端代码掺杂在一起，职员协作是个问题，并且修正掩护要十分谨慎（标签构造随意马虎被毁坏）面对这些问题，两个思路逐渐变得清晰起来，动静分离与前后端分层，前者办理性能和机器本钱的问题，后者办理开拓/掩护的问题
二.动静分离
为了充分利用 Web 做事器的静态资源处理上风，同时减轻运用做事器的包袱，将资源分为两类：
静态资源：图片、CSS、JS 等公用的，与详细用户无关的资源动态资源：运用逻辑、数据操作等与详细用户密切干系的资源两种资源分开支配，把静态资源支配至 Web 做事器或 CDN，运用做事器只支配动态资源。如此这般，静态资源相应更快了（浏览器缓存、CDN 加速），运用做事器压力更小了，皆大欢畅
然而，视图逻辑却被我们漏掉了，HTML 算作静态资源还是动态资源？
前后端分层便是为了回答这个问题
三.前后端分层
视图逻辑的分外之处在于：
与数据密切干系做事端与客户端均可承载视图逻辑也便是说，HTML 视图构造的创建和掩护事情，可以由做事端完成，也可以在客户端完成，都依赖做事数据。但与做事端比较，客户端环境有一些上风：
无需刷新（重新要求页面）即可更新视图免费的打算资源因此，视图逻辑划分到了客户端（即 CSR），以数据接口为界，分成前后端两层：
后端：供应数据及数据操作支持前端：卖力数据的呈现和交互功能自此，前后端各司其职，前端致力于用户体验的提升，后端专注业务领域，并行迭代，（不涉及接口变革时）互不影响
四.CSR 如日中天
前后端分层之后，进入了 CSR 的黄金时期，探索出了功能插件、UI 库、框架、组件等多种代码复用方案，终极形成了繁荣的组件生态
组件化的开拓办法之下，纯 CSR 模式日益盛行：
<!DOCTYPE html><html><head> <title>My Awesome Web App</title> <meta charset="utf-8"></head><body> <div id="app"></div> <script src="bundle.js"></script></body></html>
这种模式下，险些所有的页面内容都由客户端动态渲染而来，包括创建视图、要求数据、领悟数据与模版、交互功能在内的所有事情，都交由一套数据驱动的组件渲染机制来全权管理，而不必再关注组件之下的 DOM 构造掩护等事情，有效提高了前真个生产效率。但一些问题也随之而来：
在组件树首次渲染完之前，页面上无法展示任何内容，包括 loading数据要求必须等到所属组件开始渲染才能发出去这些问题的根源在于目前的组件渲染流程是同步壅塞的，对首屏性能提出了寻衅：
低端设备上 JS 实行效率低，白屏韶光长弱网环境下数据返回慢，loading 韶光长CSR 虽然利用了用户设备的打算资源，但同时也受其性能、网络环境等不可控成分的制约。于是，大家又重新将目光聚拢到了 SSR
五.SSR 东山再起
SSR 模式下，首屏内容在做事端天生，客户端收到相应 HTML 后能够直接呈现内容，而无需等到组件树渲染完毕
虽然核心思想都是在做事端完成页面渲染事情，但如今的 SSR 与先前大不相同，表示在：
出发点：为了更快、更稳定地呈现出首屏内容成熟度：建立在前端成熟的组件体系、模块生态之上，基于 Node.js 的同构方案成为最佳实践独立性：仍旧保持着前后端分层，不与业务领域的运用做事强耦合也便是说，如今的 SSR 是为理解决前端层的问题，结合 CSR 优化内容加载体验，是在 CSR 多年积淀之上的扩展，与现有的前端技能生态保持着良好的相容性。而当年的 SSR 更多地是为了实现功能，办理温饱问题
再看当年 SSR 面临的几个问题：
性能差：每一个要求过来都要重新实行一遍数据逻辑和视图逻辑，动态天生 HTML，即便个中很大一部分内容是相同的机器本钱高：Tomcat/Apache 等运用做事器的并发处理能力远不及nginx之类的 Web 做事器，因此须要支配更多的机器开拓/掩护难：前后端代码掺杂在一起，职员协作是个问题，并且修正掩护要十分谨慎（标签构造随意马虎被毁坏）引入 SSR 之后这些问题卷土重来，但这些年的技能发展为办理这些问题供应了新的思路：
实时渲染的性能问题：动静分离的思路仍旧适用，例如Static Generation做事器资源本钱问题：云打算的发展有望大幅降落机器本钱，例如Node FaaSSSR 部分与 CSR 部分的开拓/掩护问题：同构为办理开拓/掩护难题供应了一种新思路（之前的思路是前后端分层，但这一次分不开了），掩护同一份代码，跑在不同的运行环境输出不同形式的目标产物个中，Static Generation（也叫 SSG，Static Site Generation）是指在编译时天生静态 HTML（可支配至 CDN），避免实时渲染的性能开销：
Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
但并非所有页面都能在编译时静态天生，一种可行的实践方案是将 SSR 与 Static Generation 结合起来，只对内容依赖个性化数据、或者频繁更新的页面走 SSR，别的场景都走 Static Generation：
You should ask yourself: "Can I pre-render this page ahead of a user's request?" If the answer is yes, then you should choose Static Generation.
至此，沉寂多年的 SSR 又抖擞出了新的活力
参考资料What is the point of SSR these days?Two forms of Pre-rendering
有所得、有所惑，真好关注「前端向后」微信公众号，你将收成一系列「存心原创」的高质量技能文章，主题包括但不限于前端、Node.js以及做事端技能
本文首发于 ayqy.net ，原文链接：http://www.ayqy.net/blog/diference-between-ssr-and-jsp-php/
