Vue.js 中的服务端渲染和客户端渲染的区别

news2025/2/23 13:02:32

Vue.js 中的服务端渲染和客户端渲染的区别

Vue.js 是一个流行的前端框架，它提供了一种简单而强大的方式来构建交互式用户界面。Vue.js 可以在客户端和服务端执行渲染，这两种方式有不同的优势和劣势。本文将介绍 Vue.js 中的服务端渲染和客户端渲染的区别，并附上代码示例。

在这里插入图片描述

客户端渲染

在传统的客户端渲染模式下，Vue.js 代码在浏览器中执行。当用户访问页面时，浏览器会下载 HTML、CSS 和 JavaScript 等资源，然后渲染页面。当用户与页面交互时，Vue.js 会响应用户的操作并更新界面。这种方式的优势是可以实现高度的交互性，用户体验更加流畅。但是，客户端渲染也存在一些缺点：

  • 首屏加载慢：因为浏览器需要下载所有的资源才能渲染页面，所以首屏加载时间较长。
  • SEO 不友好：搜索引擎爬虫无法执行 JavaScript，所以无法抓取页面内容。这对于需要 SEO 的页面来说是一个很大的问题。
  • 性能问题：客户端渲染需要下载大量的 JavaScript 代码，在低端设备或网络较慢的情况下，页面响应速度可能会很慢。

下面是一个简单的客户端渲染的 Vue.js 应用，它包含了一个计数器和一个按钮，当用户点击按钮时，计数器会加一。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

在上述代码中，我们定义了一个名为 count 的数据属性和一个名为 increment 的方法。当用户点击按钮时，increment 方法会更新 count 属性的值，然后界面会自动更新。

服务端渲染

服务端渲染是指在服务器端执行 Vue.js 代码，生成 HTML 字符串，然后将 HTML 字符串发送给客户端。客户端只需要展示 HTML，不需要执行 JavaScript。这种方式的优势是可以实现更快的首屏加载时间、更好的 SEO 和更好的性能。但是，服务端渲染也存在一些缺点：

  • 开发难度较高：服务端渲染需要在服务器端编写代码，并且需要考虑服务器端和客户端之间的数据同步。
  • 需要更多的服务器资源：服务端渲染需要在服务器端执行 Vue.js 代码，需要更多的服务器资源。

下面是一个简单的服务端渲染的 Vue.js 应用，它和上面的客户端渲染的应用类似，只是在服务器端执行渲染。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

在服务器端，我们可以使用 vue-server-renderer 库来执行渲染。下面是一个简单的服务器端代码，它使用 Express 框架和 vue-server-renderer 库来执行渲染。

const express = require('express');
const app = express();
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

app.get('/', (req, res) => {
  const vm = new Vue({
    template: `
      <div>
        <h1>{{ count }}</h1>
        <button @click="increment">Increment</button>
      </div>
    `,
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  });

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error');
    } else {
      res.send(`
        <html>
          <head>
            <title>Vue.js Server-Side Rendering</title>
          </head>
          <body>
            ${html}
          </body>
        </html>
      `);
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在上述代码中，我们创建了一个 Vue 实例，并将其传递给 vue-server-renderer 库的 renderToString 方法，该方法会执行渲染，并将结果作为 HTML 字符串返回。然后我们将 HTML 字符串包装在一个完整的 HTML 页面中，发送给客户端。

服务端渲染和客户端渲染的区别

服务端渲染和客户端渲染有以下区别：

  1. 首屏加载速度：服务端渲染可以更快地完成首屏加载，因为服务器端会生成完整的 HTML 字符串，而客户端渲染需要等待 JavaScript 代码下载和执行完成才能渲染页面。
  2. SEO：服务端渲染可以更好地支持 SEO，因为搜索引擎爬虫可以直接抓取生成的 HTML 页面。
  3. 开发难度：服务端渲染需要在服务器端编写代码，并且需要考虑服务器端和客户端之间的数据同步，而客户端渲染只需要在浏览器中编写代码。
  4. 性能：客户端渲染可以更好地支持动态数据更新，因为只需要更新页面的一部分，而服务端渲染需要重新生成整个 HTML 页面。

综上所述，服务端渲染和客户端渲染各有优劣，需要根据具体的应用场景来选择。对于需要快速加载、支持 SEO 的页面，可以使用服务端渲染；对于需要实现高度交互性、动态数据更新的页面，可以使用客户端渲染。

代码示例

下面是一个完整的 Vue.js 应用，包含了客户端渲染和服务端渲染的代码示例。在客户端渲染模式下，我们使用 vue-cli 工具生成了一个基本的 Vue.js 应用，包含了一个计数器和一个按钮。在服务端渲染模式下，我们使用 Express 框架和 vue-server-renderer 库来实现渲染。

客户端渲染

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

服务端渲染

const express = require('express');
const app = express();
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

app.get('/', (req, res) => {
  const vm = new Vue({
    template: `
      <div>
        <h1>{{ count }}</h1>
        <button @click="increment">Increment</button>
      </div>
    `,
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  });

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error');
    } else {
      res.send(`
        <html>
          <head>
            <titleVue.js 服务端渲染和客户端渲染的区别</title>
          </head>
          <body>
            ${html}
          </body>
        </html>
      `);
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
```

客户端渲染和服务端渲染的切换

为了实现客户端渲染和服务端渲染的切换，我们需要在客户端和服务器端分别编写不同的代码。下面是一个简单的示例，演示了如何在客户端和服务器端分别渲染 Vue.js 应用。

客户端渲染

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js Client-Side Rendering</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

服务端渲染

// server.js
const express = require('express')
const app = express()
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

app.get('/', (req, res) => {
  const vm = new Vue({
    template: `
      <div>
        <h1>Hello, World!</h1>
      </div>
    `
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error')
    } else {
      res.send(`
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <title>Vue.js Server-Side Rendering</title>
          </head>
          <body>
            ${html}
          </body>
        </html>
      `)
    }
  })
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

切换代码

为了实现客户端渲染和服务端渲染的切换，我们需要根据需要动态加载不同的 JavaScript 文件。可以通过以下方式实现：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js Rendering</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      if (typeof window === 'undefined') {
        // 服务器端渲染
        const vueServerRenderer = require('vue-server-renderer')
        const renderer = vueServerRenderer.createRenderer()
        const Vue = require('vue')
        const App = require('./App.vue')

        const app = new Vue({
          render: h => h(App)
        })

        renderer.renderToString(app, (err, html) => {
          if (err) {
            console.error(err)
          } else {
            console.log(html)
          }
        })
      } else {
        // 客户端渲染
        const Vue = require('vue')
        const App = require('./App.vue')

        new Vue({
          render: h => h(App)
        }).$mount('#app')
      }
    </script>
  </body>
</html>

在上述代码中，我们根据 typeof window 来判断当前代码运行的环境，如果是服务器端，则使用 vue-server-renderer 库和 vue 实例来执行渲染；如果是客户端，则直接使用 vue 实例来执行渲染。

结论

Vue.js 服务端渲染和客户端渲染各有优缺点，需要根据具体的应用场景来选择。服务端渲染可以更快地完成首屏加载，更好地支持 SEO，但开发难度较高；客户端渲染可以实现更高的交互性和更好的动态更新，但首屏加载速度较慢，不支持 SEO。在实际应用中，可以根据具体的需求来选择使用哪种渲染方式，或者结合两种方式来实现更好的用户体验和性能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/619468.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

安全测试：13款免费的安全测试工具，抓紧白嫖不看后悔

安全测试：13款免费的安全测试工具，抓紧白嫖不看后悔

目录 1. Excercise in a Box 2. Needle 3. DevSlop 4.移动安全框架(Mobile Security Framework) 5. Frida 6. Nishang 7.Tamper 8.InSpec 9. Faraday 10. Pocsuite 11. Taipan 12.Pacu 13. Secure Guilld 总结 1. Excercise in a Box Excercise in a Box是由英国…
阅读更多...
Vue2 前端路由

Vue2 前端路由

SPA 单页面应用 只有一个页面&#xff08;一个html文件&#xff09; vue-router 组件之间的切换&#xff08;hash地址与组件间的关系&#xff09;–前端路由 vue版本与路由版本的对应关系 vue2->router3 vue3->router4 入门 用vue脚手架创建只有babel组件的vue项目…
阅读更多...
Vue.js 中的 mixin 和混入有什么区别？

Vue.js 中的 mixin 和混入有什么区别？

Vue.js 中的 mixin 和混入有什么区别&#xff1f; 在 Vue.js 中&#xff0c;mixin 和混入是两个常用的概念&#xff0c;它们可以帮助我们实现代码的复用和组件间的通信。虽然它们的名字很相似&#xff0c;但它们的作用和用法有所不同。本文将介绍 mixin 和混入的区别&#xff…
阅读更多...
在Windows中安装极狐GitLab Runner(解决 Host key verification failed.)

在Windows中安装极狐GitLab Runner(解决 Host key verification failed.)

官方文档&#xff1a;https://docs.gitlab.cn/runner/install/windows.html 在Windows中安装极狐GitLab Runner 1.下载GitLab Runner二进制文件&#xff0c;新建一个文件夹&#xff08;不要有中文&#xff09;&#xff0c;并将二进制文件放入该文件夹&#xff0c;重命名为“git…
阅读更多...
最新成果展示：AlInN/GaN DBR模型数据库的开发与应用

最新成果展示：AlInN/GaN DBR模型数据库的开发与应用

由于AlN和GaN之间存在较大的晶格失配和热膨胀失配&#xff0c;导致很难获得高质量的AlN/GaN布拉格反射镜&#xff08;Distributed Bragg Reflection&#xff0c;DBR&#xff09;结构。为解决该问题&#xff0c;天津赛米卡尔科技有限公司技术团队基于先进的TCAD仿真设计平台开发…
阅读更多...
OpenAI Triton 初探

OpenAI Triton 初探

Triton 2021年发布了1.0&#xff0c;我在调研GPU使用方法的时候知道了有这个东西&#xff0c;但是当时还不了解OpenAI&#xff0c;觉得这个项目太新太小众&#xff0c;并没有深究。现在GPT大火之后&#xff0c;再回过头看看他们的这个东西。 现在相关文档还是很少&#xff0c;…
阅读更多...
EXCEL数据计算分析功能助力PID闭环控制优化

EXCEL数据计算分析功能助力PID闭环控制优化

EXCEL大家并不陌生，这篇博客记录汇总利用EXCEL进行工作分析的一些技巧，专栏也会持续更新，感谢大家关注评论。首先介绍下工控上用的比较多的模拟量采集，模拟量采集的数学基础大家可以查看下面的博客： PLC模拟量输出 模拟量转换FC S_RTI_博图模拟量输出指令_RXXW_Dor的博客…
阅读更多...
INDEMIND：陷入创新焦虑的扫地机器人，下一步该怎么走？

INDEMIND：陷入创新焦虑的扫地机器人，下一步该怎么走？

卖不动的扫地机器人&#xff0c;需要翻过高价和智能化两座大山。 卖不动的背后&#xff0c;原因是什么&#xff1f; 视角回到行业&#xff0c;随着基站型全功能扫地机器人的出现&#xff0c;机器人的产品力和使用体验得到明显提升&#xff0c;可以说已经能够极大程度的满足消…
阅读更多...
Java中查看堆里的信息

Java中查看堆里的信息

文章目录 前言1 建议无脑的做一件事2 jmp命令3 导入 hprof 文件到Visual VM 中4 查看对象属性值 前言 日常工作中&#xff0c;我们可能会遇到这样的场景&#xff1a; java项目发生了OOM&#xff1b;想知道在某种场景下&#xff0c;堆里的信息&#xff0c;从而确认一些代码功能…
阅读更多...
2000道面试必问的Java面试八股文及答案整理（2023版）

2000道面试必问的Java面试八股文及答案整理（2023版）

说快也快&#xff0c;说不快也不慢&#xff01; 年前&#xff0c;陆陆续续&#xff0c;好多大厂都在裁员&#xff1b; 年后&#xff0c;又有一大批程序员失业&#xff0c;找不到避风港&#xff1b; 这时候&#xff0c;就有人说了&#xff0c;为什么找工作这么难&#xff1f;…
阅读更多...
【技巧】ZIP文件的分卷压缩如何设置 ？

【技巧】ZIP文件的分卷压缩如何设置 ？

有时候&#xff0c;因为文件过大&#xff0c;我们进行压缩后发现压缩包依旧很大&#xff0c;不方便储存或邮件发送等。 这种情况就需要把文件进行分卷压缩&#xff0c;也就是根据需要的大小&#xff0c;把文件分别压缩成若干个小压缩包。 还不了解的小伙伴&#xff0c;可以看…
阅读更多...
入行这几年，我已经快要摸透了软件测试这一行！

入行这几年，我已经快要摸透了软件测试这一行！

目录 前言&#xff1a; 第一年 第二年 第三年 第四年 作为过来人的一些忠告 自动化测试到底应该学什么&#xff1f; 结尾&#xff1a; 前言&#xff1a; 软件测试是通过对软件系统进行测试、诊断和验证&#xff0c;以保证软件系统能够符合用户需求和预期质量标准的过程。 大…
阅读更多...
java设计模式之：适配器模式

java设计模式之：适配器模式

文章目录 适配器模式定义通用代码实现适用场景案例场景分析一坨坨代码实现适配器模式重构 总结 适配器模式&#xff08;Adapter Pattern&#xff09;&#xff1a;将一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而无法在一起工作的两个类能够…
阅读更多...
熬夜整理21条避坑指南，细聊该如何让自动化完美运行！

熬夜整理21条避坑指南，细聊该如何让自动化完美运行！

目录 1、引言 2、避坑内容总结 2.1无法定位到元素 2.2 Indentation Error 2.3 PO设计模式类 2.4 页面封装类中没有已定义函数的问题 2.4.1 提示没有该方法 2.4.2 没有定义好的函数 2.5 parater must be str 2.6 继承 2.7 not all arguments curerted during string …
阅读更多...
前端web自动化测试：selenium怎么实现关键字驱动

前端web自动化测试：selenium怎么实现关键字驱动

要做 ui 自动化测试&#xff0c;使用关键字驱动可以说是必须会的一种测试方式&#xff0c;它既可以在纯代码的自动化程序中运行&#xff0c;也可以在测试平台中使用。 使用纯代码方式时&#xff0c;自动化工程师先写好一个通用的程序&#xff0c;其他手工测试人员只需要把执行…
阅读更多...
Python 中文编码

Python 中文编码

Python 文件中如果未指定编码&#xff0c;在执行过程会出现报错&#xff1a; #!/usr/bin/python print (“你好&#xff0c;世界”) 以上程序执行输出结果为&#xff1a; File “test.py”, line 2 SyntaxError: Non-ASCII character ‘\xe4’ in file test.py on line 2, b…
阅读更多...
接口自动化测试：Python+Pytest+Requests+Allure

接口自动化测试：Python+Pytest+Requests+Allure

本项目实现了对Daily Cost的接口测试&#xff1a; PythonRequests 发送和处理HTTP协议的请求接口Pytest 作为测试执行器YAML 管理测试数据Allure 来生成测试报告。 本项目是参考了pytestDemo做了自己的实现。 1. 项目结构及安装部署 项目结构 api: 接口封装层&#xff0c;…
阅读更多...
未来软件测试的5个主要趋势以及软件测试进阶路线

未来软件测试的5个主要趋势以及软件测试进阶路线

全球各地的企业每天都在发展变化着&#xff0c;以应对市场挑战&#xff0c;满足日益成熟的客户需求。即使是正在进行的技术进步也会使软件测试专家在实践的过程中更加专注和精确。 2021年给软件测试领域带来了新的技术解决方案&#xff0c;以及质量保证和软件测试的实现。与此同…
阅读更多...
无线蓝牙耳机哪个品牌好？十款精选的无线蓝牙耳机品牌推荐

无线蓝牙耳机哪个品牌好？十款精选的无线蓝牙耳机品牌推荐

蓝牙耳机是一种无线耳机&#xff0c;其通过蓝牙技术与其他设备进行连接&#xff0c;例如手机、电脑、平板电脑等。蓝牙耳机使得用户可以在不受线缆限制的情况下享受音频体验&#xff0c;而且还可以方便地进行通话&#xff0c;目前市场上有许多不同种类和品牌的蓝牙耳机&#xf…
阅读更多...
如何利用Python爬虫抓取某眼查网站中的q业信息？

如何利用Python爬虫抓取某眼查网站中的q业信息？

部分数据来源：ChatGPT 引言： 最近在朋友圈看到了一个Python爬虫兼职的机会，但是由于一些原因我没有接到，于是我自己写了一个某眼查搜索结果爬取的Python脚本。下面将分享这个脚本的详细使用教程。 背景 某眼查是一家经营企业信用信息服务的公司，可以通过其网站查询公司信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023