服务器端渲染（Server-Side Rendering，简称SSR）是一种通过在服务器端生成HTML页面的技术，相较于传统的客户端渲染（Client-Side Rendering，简称CSR）具有许多优点。本文将介绍SSR的工作原理以及其与CSR的区别。
SSR工作原理
-
客户端请求页面： 当用户在浏览器中访问一个URL时，浏览器会向服务器发送一个请求。
-
服务器处理请求： 服务器接收到请求后，根据URL路由找到对应的处理函数。在SSR中，处理函数会执行一部分业务逻辑，然后调用页面模板（如HTML模板）进行渲染。
-
数据获取： 在SSR中，需要获取数据来渲染页面。服务器会调用后端API或数据库查询数据，并将数据作为参数传递给页面模板。
-
数据注入： 页面模板使用获取到的数据，将其注入到HTML模板中的特定位置。这样，页面就包含了动态数据。
-
页面渲染： 服务器将注入数据后的HTML模板进行渲染，最终生成一个完整的HTML页面。
-
响应返回： 服务器将生成的HTML页面作为响应返回给浏览器。
-
客户端渲染： 浏览器接收到服务器返回的HTML页面，开始加载HTML中的静态资源，比如CSS和JavaScript。同时，浏览器会执行JavaScript代码，绑定事件、处理交互等。
-
客户端渲染接管： 一旦浏览器中的JavaScript代码执行完毕，页面就会接管并开始处理后续的渲染。通常，客户端渲染会处理页面中的动态交互和数据更新。
SSR与CSR的区别
SSR和CSR有以下几个主要区别：
-
性能表现： SSR能提供更快的首屏加载速度，因为页面是在服务器端就已经渲染好了。而CSR需要使用JavaScript代码进行渲染，存在加载和执行时间的延迟。
-
SEO友好： 由于SSR在服务器端就生成了完整的HTML页面，对搜索引擎来说更容易抓取和索引页面。而CSR中，搜索引擎只能看到一个空的HTML页面，需要等待JavaScript加载和执行才能获取到动态内容。
-
开发难度： SSR需要处理服务器端逻辑和客户端逻辑，需要考虑更多的方面，如路由处理、数据获取等。相比之下，CSR只需要关注客户端逻辑，开发难度相对较低。
总之，SSR和CSR在不同的场景下有各自的优势，选择哪种方式要根据项目的需求和具体场景来决定。
总结
服务器端渲染（SSR）通过在服务器端生成完整的HTML页面，提供了更快的首屏加载速度和更好的SEO表现。具体的工作原理包括：客户端请求页面，服务器处理请求，数据获取，数据注入，页面渲染，响应返回，客户端渲染接管。与客户端渲染（CSR）相比，SSR有性能表现、SEO友好和开发难度等方面的优势。根据具体需求，选择适合的渲染方式是非常重要的。
本文来自极简博客，作者：柠檬味的夏天，转载请注明原文链接：服务器端渲染（SSR）的工作原理
