Vue面试之csr与ssr渲染的区别

????最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~

CSR（Client-Side Rendering）和SSR（Server-Side Rendering）是两种不同的前端渲染方式，它们在页面加载和渲染的过程中有一些显著的区别。以下是它们的主要区别：

CSR

1.特点：
????页面的渲染由客户端浏览器负责，而不是服务器。
????首次请求通常返回一个包含基本 HTML 结构的文档，同时携带少量的 JavaScript 代码。
????JavaScript 代码在浏览器中执行，通过 AJAX 请求获取数据，并更新页面内容。

2. 优点：
   ????适用于单页面应用（SPA）和复杂的交互。
   ????前后端分离，更易于开发和维护。

3. 缺点：
   ????首次加载可能会有较长的白屏时间，用户体验不佳。
   ????不利于 SEO，因为搜索引擎爬虫不会执行 JavaScript。

SSR

1. 特点：
   ????服务器在首次请求时负责渲染整个 HTML 页面，包含了初始的页面内容。
   ????返回给客户端的 HTML 包含了页面的完整结构和数据，可以直接在浏览器中显示。
   ????后续的页面交互仍然可以由客户端负责。

2. 优点：
   ????首屏加载较快，用户体验好，有助于提高 SEO。
   ????有利于搜索引擎爬虫抓取内容，因为页面已经在服务器端渲染好。

3. 缺点：
   ????对服务器压力较大，特别是在大量用户并发访问时。
   ????开发和维护可能相对复杂。

CSR 与 SSR 的选择取决于项目需求

1. CSR 适用于：
   ????复杂的交互和单页面应用。
   ????前后端分离，更灵活的前端开发。

2. SSR 适用于：
   ????需要更好的首屏加载性能和SEO。
   ????对服务器压力有一定容忍度。

在实际项目中，有时候也会采用 CSR 和 SSR 结合的方式，即服务端渲染首屏，然后转交给客户端进行后续的交互。这样可以兼顾首屏加载性能和较好的前端开发体验

Vue中的csr与ssr

在Vue.js中，有两个主要的渲染框架，分别用于服务端渲染（SSR）和客户端渲染（CSR）：

客户端渲染框架 - Vue CLI

????Vue CLI 是 Vue.js 的官方脚手架工具，主要用于构建客户端渲染的 Vue.js 应用(我们的老熟人了~)
????Vue CLI 提供了一套现代化的开发工具链，可以轻松创建、开发、调试和构建 Vue.js 项目。
????Vue CLI 支持单页面应用（SPA），通过 Vue Router 进行客户端导航。

服务端渲染框架 - Nuxt.js

• Nuxt.js 是基于 Vue.js 的服务端渲染框架，它简化了 Vue SSR 的配置和开发过程。
• 提供了一种约定大于配置的方式，通过文件和目录结构的约定，自动生成路由、页面、布局等
• 集成了服务器端渲染、客户端渲染、静态站点生成等多种渲染模式，灵活适应不同的项目需求。

示例 Nuxt.js 项目结构：

/pages
  /index.vue
  /about.vue
/components
  /Header.vue
  /Footer.vue

使用 Nuxt.js，你可以创建一个支持服务端渲染的 Vue.js 项目，并根据需要选择是否进行客户端渲染。

总体而言，Nuxt.js 更专注于服务端渲染和静态站点生成，而 Vue CLI 提供了更多灵活性，适用于各种客户端渲染的场景。选择使用哪个框架取决于项目的具体需求和技术栈。