1. SSR 服务端渲染
SSR（Server-Side Rendering，服务器端渲染）是一种通过服务器生成完整HTML页面并将其返回给客户端的渲染方式。这意味着在用户请求页面时，服务器会提前渲染页面内容，并将渲染好的HTML发送到浏览器，浏览器直接显示页面，而不是先加载一个空的HTML框架，之后通过JavaScript来加载和渲染内容。
SSR的工作原理：
客户端发起请求：用户在浏览器输入URL，向服务器请求页面。
服务器处理请求：服务器接收到请求后，会根据请求的页面，使用服务器端的JavaScript（如React、Vue等）渲染出页面内容，并将生成的HTML发送给浏览器。
浏览器显示页面：浏览器直接显示完整的HTML页面。此时，页面已经包含了所有内容，而不需要等待JavaScript加载后才呈现。
SSR的优点：
- 更好的SEO：因为在服务器端已经生成了完整的HTML页面，搜索引擎能够直接读取到页面内容，避免了客户端渲染时内容加载延迟的问题，这对于SEO非常重要。
- 更快的首屏加载：由于浏览器直接获得了完整的HTML，首屏展示速度较快。即便是页面中的JavaScript还未完全加载，用户也能看到内容，提升了用户体验。
- 社交分享友好：例如，当你分享一个网页链接到社交平台时，平台会抓取页面的内容并显示预览。如果使用SSR，社交平台可以抓取到渲染好的内容，而不需要执行JavaScript。
SSR的缺点： - 服务器压力大：由于每个请求都需要服务器渲染页面，服务器的负担会相对较重，特别是在流量很大的情况下，服务器可能会因为过多的渲染请求而变得迟缓。
- 首屏加载后交互较慢：虽然首屏加载较快，但一旦页面内容加载完毕，浏览器仍然需要加载和执行客户端的JavaScript代码来实现交互。这个过程可能导致页面交互变得迟缓，尤其是在大型应用中。
- 开发复杂度较高：相较于传统的客户端渲染（CSR），SSR的实现和部署需要更多的配置，开发过程也相对复杂。
适用场景：
SEO需求较高的内容网站：例如，博客、新闻网站、产品页面等需要在搜索引擎中获得高排名的应用。通过SSR，网站内容可以更容易被搜索引擎抓取和索引。
首屏加载速度要求高的应用：例如，电商网站、内容平台等，当用户快速访问时，页面的快速展示是提升用户体验的关键。
社交媒体分享和预览：当网站的内容在社交平台或即时通讯工具中分享时，如果使用SSR，预览图、标题、描述等信息会被正确显示，提升用户的分享体验。
需要跨设备一致体验的应用：例如，用户在不同设备上访问时，需要保证他们能够快速获取完整内容，SSR可以减少设备差异带来的体验不一致问题。
什么时候不需要SSR？
应用主要是客户端渲染的：比如一些动态交互较多的应用（如SPA），这些应用的内容主要依赖客户端的JavaScript来渲染。SSR可能带来过多的复杂性，并且无法大幅提升性能。
无需考虑SEO的内部工具或后台系统：如果是内网应用，或者不依赖于搜索引擎的系统，SSR的优势可能不大。
如何实现SSR？
常见的SSR技术栈包括：
Next.js：一个基于React的框架，提供了开箱即用的SSR功能，特别适用于构建React应用的服务器端渲染。
Nuxt.js：一个基于Vue.js的框架，支持SSR，可以用来构建Vue应用的服务端渲染。
Angular Universal：Angular的SSR解决方案。
这些框架在服务器端渲染时会自动处理很多复杂的配置，帮助开发者实现SSR。