SSR

什么是SSR

”服务器端渲染“。简单来说，就是在服务器端上生成网页的过程，然后将完整的html内容发送到客户端浏览器进行显示。

服务器一般指用于处理客户端请求并生成完整html页面的计算机或计算机集群。

查看页面源代码：
- 在浏览器中打开开发者工具（通常按F12或右键选择“检查”）。
- 查看“页面源代码”或“元素”选项卡。如果页面加载时已经包含完整的HTML内容（而不是大量的JavaScript代码），则可能是SSR。
禁用JavaScript：
- 在浏览器中禁用JavaScript，然后刷新页面。
- 如果页面仍然能正常显示大部分内容，说明可能使用了SSR。
网络请求分析：
- 在开发者工具的“网络”选项卡中查看请求。
- 如果初始请求返回的HTML已经包含大部分内容，而不是通过后续的JavaScript请求加载的，可能是SSR。
查看框架和技术栈：
- 检查项目使用的框架或技术栈。像Next.js、Nuxt.js等框架支持SSR。
- 查看项目文档或配置文件，寻找与SSR相关的设置。
SEO表现：
- 使用SEO工具查看页面的抓取和索引情况。SSR页面通常在SEO方面表现更好

CSR指的是“客户端渲染”（Client-Side Rendering）。这是一个在客户端（通常是浏览器）上生成网页内容的过程。以下是CSR的一些关键特点：

初始加载：
- 浏览器从服务器获取一个基本的HTML页面，通常只包含一个根元素和一些JavaScript文件。
JavaScript执行：
- JavaScript在客户端执行，动态生成和更新页面内容。这通常通过框架如React、Vue.js或Angular实现。
用户交互：
- 用户与页面交互时，JavaScript负责更新页面内容，而不需要重新加载整个页面。
优点：
- 更快的页面交互和动态更新。
- 减少服务器负担，因为大部分渲染工作在客户端完成。
缺点：
- 初始加载时间可能较长，因为需要下载和执行JavaScript。
- 对SEO不太友好，因为搜索引擎可能无法抓取动态生成的内容。

CSR适用于需要丰富用户交互和动态内容的应用。

Nuxt.js、Next.js 和 Remix 是三种流行的 JavaScript 框架，它们各自有不同的特点和用途。以下是它们的主要区别：

基于框架：Vue.js
主要用途：用于构建服务端渲染（SSR）和静态站点生成（SSG）的 Vue 应用。
特点：
- 提供开箱即用的路由和状态管理。
- 支持自动代码拆分和懒加载。
- 强大的模块生态系统，支持 PWA、SEO 优化等。
- 适合需要复杂 UI 和交互的应用。

基于框架：React.js
主要用途：用于构建服务端渲染（SSR）、静态站点生成（SSG）和客户端渲染（CSR）的 React 应用。
特点：
- 提供文件系统路由和 API 路由。
- 支持增量静态生成（ISR），提高构建性能。
- 内置 CSS 和 Sass 支持，支持 CSS-in-JS。
- 适合需要高性能和灵活性的应用。

基于框架：React.js
主要用途：专注于构建快速、动态的 Web 应用，强调服务端渲染和数据获取。
特点：
- 强调路由和数据加载的紧密结合。
- 提供更好的数据获取和缓存策略。
- 支持现代 Web 标准，如 Fetch API 和 Web Streams。
- 适合需要高交互性和实时数据的应用。