谈谈服务端渲染

• SPA：页面的数据处理和渲染完全由前端去控制
• SSR：页面的逻辑处理及结构基本由服务端负责，前端拿到结果以后执行渲染逻辑即可

什么场景需要服务端渲染

• 有SEO诉求，用在搜索引擎检索以及社交分享，用在前台类应用。
• 新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目
• 首屏渲染时长有要求，常用在移动端、弱网情况下
• SSR给我们带来了两大特性：
  • 更友好的SEO优化
  • 首屏加载用户体验

为什么服务端渲染可以提高首屏优化,减少白屏

• 减少请求，服务端已经处理好数据请求和页面内容的生成，直接将完整的 HTML 结构返回给客户端。直接返回给客户端显示，无需等待js脚本下载执行之后才显示
• 减少浏览器渲染，服务端已经处理好HTML结构，返回给客户端浏览器

简单来说：客户端浏览器直接渲染服务端返回的 HTML，用户体验感受会更快

SSR解决什么问题？

为了解决单页应用的问题，出现了SSR解决方案，服务端渲染出完整的首屏的dom结构返回，前端拿到的内容带上首屏， 后续的页面操作，再用单页的路由跳转和渲染，称之为服务端渲染 (server side render)

简单来说就是在服务器上把数据和模板拼接好返回给客户端显示，客户端获取可直接渲染的完整html文件

即服务器渲染页面，返回给客户端显示

• 简单来说就是服务端读取模板，解析成DOM节点，返回HTML结构，返回给客户端显示

优点：

• 解决了SPA单页面页面首次加载慢，提高加载速度
  • 可以省去浏览器端首次渲染的工作，加快首屏显示加载速度。
• 更好的SEO搜索引擎优化

缺点：

• 服务器端压力：在 SSR 中，服务端需要处理更多的请求，承担更多的渲染工作，从而增加了服务器的负担
• 服务端渲染不利于实现动态交互：由于 SSR 的页面是在服务器端渲染的，因此无法在客户端实现一些需要动态交互的功能
• 整体页面加载

SPA的问题

• SPA: 单页面应用

优点：

• 页面之间切换快；减少了服务器压力；
• 用户体验好，当内容改变的时候不需要整体加载，只是部分加载
• 减轻服务端压力，服务端不需要处理页面模板的逻辑与拼接

缺点：

• 不利于 SEO 搜索引擎。
  • 不利于 SEO，由于是采用前端渲染的方式，搜索引擎不会去解析 Js
• 首次加载速度慢，SPA单页应用通常首次加载页面时就会将相应的 HTML、JavaScript、CSS文件全部加载，通常可以通过采取缓存措施以及懒加载即按需加载组件的方式来优化
• 单页应用则需要自行进行计算和组装，中间过程很可能还涉及数据的二次请求，因此会比多页应用慢

为什么SSR渲染能提高SEO

• 搜索引擎能直接抓到页面内容结构，不依赖 JS 执行，能让搜索引擎第一时间获取完整的HTML内容结构

• 因为搜索引擎不会去解析js，只会直接抓取页面的内容结构

• 如果是spa单页面应用，需要浏览器去处理js文件逻辑，内容通过js来动态生成渲染，首次加载响应的内容只有一个空的div标签，会搜索引擎抓取不到内容， 而SSR渲染，是已经直接响应返回完整的HTML结构，包含了相关内容如meta标签、title标签、结构化数据等等，搜索引擎可以直接爬取

• 让搜索引擎更快、更完整地抓取内容

SSR渲染报错，如何处理？

• 排查错误日志信息定位
• 可以增加一个服务端插件，将错误信息输出到pm2中

谈谈CSR/SSR/SSG

• SR全称是 Client Side Rendering ，代表的是客户端渲染
• SSR全称是 Server Side Rendering，代表的是服务端渲染
• SSG全称是 Static Site Generation ，代表的是静态站点生成

谈谈同构渲染

同构渲染指的：一套应用代码，能在服务端生成HTML结构，给到客户端浏览器渲染执行，同构就是服务端和客户端都能运行

• nuxt，next这种框架就是同构渲染
• 同构渲染本质就是 服务端渲染 + 客户端渲染

谈谈你在项目ssr的落地实战

• 官网项目使用了 SSR
• 为官网带来seo搜索引擎的提升

谈谈服务端渲染注意地方

• 服务端和客户端环境问题，注意相关生命周期，有些只能在服务端执行，有些只能在客户端执行
  • 比如有状态的生命周期，只能在客户端执行，比如onMount
  • 注意避免在setup中，直接访问 window 或 document
    • SSR 环境下不存在 DOM
• 异步数据获取问题注意
  • ssr渲染期间，在服务端已经完成了异步数据的获取请求，避免在客户端执行时重复请求
  • ssr首次请求在服务端执行，客户端复用已有数据响应结果