随手笔记 3D建模的六种渲染方式(2)

正文1. SSR (Server Side Rendering)
SSR， 服务端渲染。
服务器呈现响应于导航为服务器上的页面生成完整的HTML。这样可以避免在客户端进行数据获取和模板化的其他往返过程，因为它是在浏览器获得响应之前进行处理的。
服务器渲染通常会产生快速的 First Paint （FP）和 First Contentful Paint （FCP）。
在服务器上运行页面逻辑和呈现可以避免向客户端发送大量JavaScript，这有助于实现快速的交互时间 （TTI）。
这是有道理的，因为使用服务器渲染，实际上只是将文本和链接发送到用户的浏览器。
这种方法可以在很大范围的设备和网络条件下很好地工作，并且可以带来有趣的浏览器优化，例如流文档解析。
流程：
浏览器 -- 服务器 -- 服务器执行渲染 -- index.html(实时渲染的内容)) -- Render -- bundle.js images -- Render
优点
内容立即可用 -因为将HTML发送给客户端，所以几乎会立即看到页面内容。
无需获取其他客户端 -理想情况下，服务器呈现过程将进行所有必需的调用以获取数据，因此不会从客户端进行任何其他服务调用。
非常适合SEO
缺点
服务器上的速度较慢 -需要渲染两次页面：一次在服务器上，一次在客户端上。同时也可能正在从服务器进行服务调用以呈现页面，所有这些都需要时间，因此可能会延迟HTML向客户端的初始发送。
与某些UI库不兼容 -如果你用的某些库使用了window，那你就要想办法来解决了。因为 Node 中没有window 或者 document。

2. SSG (Static Site Generation)
SSG：静态网站生成。
静态网站生成类似于服务器端渲染，不同之处在于您在构建时而不是在请求时渲染页面。
与服务器渲染不同，由于不必动态生成页面的HTML，因此它还可以实现始终如一的快速到第一字节的时间。
通常，静态呈现意味着提前为每个URL生成单独的HTML文件。
借助预先生成的HTML响应，可以将静态渲染器部署到多个CDN，以利用边缘缓存的优势。
优点
内容立即可用 -因为将HTML发送给客户端，所以几乎会立即看到页面内容。
无需获取其他客户端 -理想情况下，服务器呈现过程将进行所有必需的调用以获取数据，因此不会从客户端进行任何其他服务调用。
非常适合SEO
快-静态内容的呈现速度速度非常快。
没有服务器 -不必运行服务器。
缺点
大型站点可能会很慢 -如果路由很多，速度可能会变慢。
与某些UI库不兼容 -如果你用的某些库使用了window，那你就要想办法来解决了。因为 Node 中没有window 或者 document。