SSR 执行过程，实现原理
服务器端渲染（SSR）是一种技术，它涉及在服务器上生成完整的HTML页面，然后发送到客户端的浏览器。这与传统的客户端渲染（CSR）形成对比，后者是在浏览器中使用JavaScript动态生成HTML内容。SSR可以提高首次加载性能、优化搜索引擎优化（SEO）和提升用户体验。
主要流程：
1.请求发送
- 用户在浏览器中输入一个URL或点击一个链接。
- 浏览器向服务器发送一个HTTP请求。
2.服务器处理
- 服务器接收到请求后，根据请求的URL确定需要渲染的页面或组件。
- 服务器执行JavaScript代码，通常是使用Node.js环境，来预先填充应用的初始状态。这可能涉及到从数据库或API获取数据。
- 使用获取的数据，服务器执行应用的渲染逻辑，生成完整的HTML页面。在这个过程中，服务器会渲染页面的布局、内容、样式等。
3. 发送响应
- 服务器将生成的HTML页面作为HTTP响应的一部分发送回客户端。
- 响应中通常还包含CSS样式、客户端JavaScript脚本等资源的链接，这些资源用于在浏览器中增强页面功能和交互性。
4. 浏览器处理
- 浏览器接收到服务器响应后，开始解析HTML内容，并显示给用户。
- 同时，浏览器会请求额外的资源，如CSS文件、JavaScript文件等，并处理它们。这包括执行客户端JavaScript，它可以添加动态功能和处理用户交互。
5. 客户端渲染接管
- 一旦客户端JavaScript加载并执行，应用就变成了一个SPA（单页应用）。此时，客户端渲染接管页面的进一步导航，通过AJAX请求获取数据并动态更新页面的内容，而不是重新加载整个页面。
优势
- 性能提升：用户可以更快地看到页面的第一屏内容，因为HTML是预先生成的。
- SEO优化：搜索引擎可以抓取到完整的页面内容，这有助于提升网站在搜索结果中的排名。
- 更好的用户体验：用户在请求页面时感受到的等待时间减少，从而提升了用户体验。
同构
同构JavaScript
同构JavaScript，有时也称为通用JavaScript，是一种编程范畴，指的是同一份代码能够在服务器端和客户端（浏览器）上运行。这种方式主要用于Web应用开发，旨在结合服务器端渲染（SSR）的优势和客户端渲染（CSR）的交互体验，提供更快的首屏加载速度、更好的SEO表现以及更丰富的用户交互。
同构JavaScript的关键优势包括：
- 更好的SEO：服务器端渲染可以生成完整的页面HTML，对搜索引擎友好，有利于提高页面的搜索排名。
- 快速的内容可视化：用户可以更快地看到首屏内容，因为页面的初始视图是由服务器预渲染的，无需等待所有JavaScript代码下载和执行。
- 代码复用：相同的代码库可以在服务器和客户端上使用，减少了代码冗余，简化了开发和维护工作。
- 改善性能：对于低性能设备或慢速网络环境，服务器端渲染可以减少设备的计算负担，提供更快的页面加载体验。
同构JavaScript实现
- 服务器端渲染（SSR）：当用户首次请求页面时，服务器执行JavaScript代码，渲染出完整的页面HTML，并将其发送给客户端。这个过程包括页面结构的渲染和初始数据的填充。
- 客户端激活（Hydration）：浏览器加载服务器发送的HTML，并下载相应的JavaScript代码。然后，JavaScript代码“激活”静态HTML，使其变为可交互的动态页面。这一过程也称为Hydration（客户端激活）。
- 客户端渲染（CSR）：在Hydration之后，页面的进一步交互和数据更新将通过客户端JavaScript处理，与传统的SPA应用类似。
流行的同构JavaScript框架
- React：通过Next.js这样的框架，React应用可以实现同构渲染。
- Vue.js：Vue.js通过Nuxt.js框架支持同构应用开发。
挑战
- 状态管理：需要确保服务器和客户端共享相同的应用状态。
- 数据获取：在服务器和客户端上统一数据获取逻辑可能会有所挑战。
- 构建配置：可能需要专门的构建和部署配置来支持同构应用。