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

发布时间:2024年01月11日


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

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

CSR

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

  1. 优点:
    ????适用于单页面应用(SPA)和复杂的交互。
    ????前后端分离,更易于开发和维护。

  2. 缺点:
    ????首次加载可能会有较长的白屏时间,用户体验不佳。
    ????不利于 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 提供了更多灵活性,适用于各种客户端渲染的场景。选择使用哪个框架取决于项目的具体需求和技术栈。

文章来源:https://blog.csdn.net/ks795820/article/details/135531524
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。