服务器渲染与客户端渲染

服务器渲染（后端渲染）

浏览器发送请求到服务器端，服务器端处理请求并处理好数据，然后生成html文件，并返回给浏览器。
传统的jsp、php都是属于服务器渲染。

后端渲染的优势：

• 首屏性能好，不需要先下载一堆 js 和 css 后才能看到页面
• 有利于SEO

后端渲染的劣势：

• 不能实现部分更新。即使只有一部分变动，也需要后端重新渲染整个页面并发回给浏览器。

客户端渲染（前端渲染）

服务器端处理请求后将数据返回给浏览器，浏览器通过拼接html字符串或者使用js模板引擎，或者React这类框架进行页面渲染。

前端渲染的优势：

• 局部更新。无需每次都进行完整页面请求
• 懒加载。页面初始时只加载可视区域内的数据，随着滚动等操作再加载其他数据
• 节约服务器成本
• 关注分离设计。服务器只用于访问数据库提供接口，前端关注展现。
• 富交互，使用 JS 实现各种酷炫效果

前端渲染的劣势：（其实也就是后端渲染的优势）

• 首屏性能：前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。
• SEO：由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。

一般前端渲染会使用到模板引擎。模板引擎的工作原理可以简单地分成两个步骤：

• 模板解析/编译
• 渲染