什么是SSR？
SSR，全称为Server Side Rendering，是一种将动态生成的网页在服务器端进行渲染后再发送到客户端的技术。传统的网页渲染方式是在客户端进行，即在浏览器中使用JavaScript动态生成页面内容。然而，这种方式存在一些问题，例如缺乏SEO支持、加载速度慢等。SSR则是为了解决这些问题而出现的一种技术方案。
为什么需要SSR？
提升SEO支持：传统的客户端渲染在搜索引擎爬取网页时只能获取到初始的HTML内容，而无法获取动态生成的内容。这会导致搜索引擎对页面的可索引性下降，进而影响网站在搜索结果中的排名。使用SSR可以在服务器端将动态内容渲染为静态HTML，使得搜索引擎可以获取到完整的页面内容，提升SEO支持。
提升首屏加载速度：客户端渲染需要先下载HTML文件，然后执行JavaScript代码来生成页面内容，这会导致页面在首次加载时的延迟，尤其是在网络较差的情况下。而SSR在服务器端将页面渲染好后，直接发送给客户端，减少了页面的下载和渲染时间，从而提升了首屏加载速度。
SSR的实现方式
预渲染：预渲染是一种简单的SSR实现方式，它通过事先执行JavaScript代码，将页面的静态内容生成为HTML文件，然后发送给客户端。预渲染可以在构建过程中实现，也可以通过服务器端的路由来动态处理。然而，预渲染只适用于内容相对静态且无需频繁更新的网页，无法满足高度动态化的需求。
服务器端渲染：服务器端渲染指的是在服务器端使用一种特殊的框架或库来渲染动态内容，并发送给客户端。一些流行的服务器端渲染框架包括Next.js和Nuxt.js。这些框架提供了一套完整的解决方案，包括路由、数据预取、页面渲染等功能。使用服务器端渲染可以实现复杂的动态网页，但也增加了服务器的负载。
客户端渲染与服务器端渲染的结合：为了兼顾动态化和性能，还可以将客户端渲染与服务器端渲染结合使用。页面的初始请求通过服务器端渲染来获得静态内容，然后通过JavaScript代码在客户端进行进一步的渲染和动态化处理。这种方式可以在页面加载速度和动态交互之间找到一个平衡。
总而言之，SSR是为了解决传统客户端渲染方式所存在的问题而出现的一种技术方案。通过将动态生成的内容在服务器端进行渲染后再发送到客户端，SSR可以提升SEO支持、首屏加载速度等方面的性能表现。不同的实现方式可以根据需求选择预渲染、服务器端渲染或客户端渲染与服务器端渲染的结合。
