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

这篇具有很好参考价值的文章主要介绍了Vue.js 中的服务端渲染和客户端渲染的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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。在实际应用中,可以根据具体的需求来选择使用哪种渲染方式,或者结合两种方式来实现更好的用户体验和性能。文章来源地址https://www.toymoban.com/news/detail-474678.html

到了这里,关于Vue.js 中的服务端渲染和客户端渲染的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SOCKET通信中的各种ip问题,服务端获取客户端ip地址

            在进行socket网络通信的时候,我们经常需要获取ip地址,下面介绍一些获取ip地址的方法。 1.自动获取本机ip地址         可以获取本地所有ip地址,可根据自己需求取出ip。 2.在绑定套接字的时候,要获取本机ip         可用INADDR_ANY,宏INADDR_ANY转换过来就是

    2024年02月12日
    浏览(41)
  • 3.3.2 【MySQL】客户端和服务器通信中的字符集

    3.3.2.1 编码和解码使用的字符集不一致的后果 我们知道字符 \\\'我\\\' 在 utf8 字符集编码下的字节串长这样: 0xE68891 ,如果一个程序把这个字节串发送到另一个程序里,另一个程序用不同的字符集去解码这个字节串,假设使用的是 gbk 字符集来解释这串字节,解码过程就是这样的:

    2024年02月09日
    浏览(46)
  • 【boost网络库从青铜到王者】第五篇:asio网络编程中的同步读写的客户端和服务器示例

    前面我们介绍了 boost::asio 同步读写的 api 函数,现在将前面的 api 串联起来,做一个能跑起来的 客户端 和 服务器 。 客户端 和 服务器 采用阻塞的同步读写方式完成通信。 客户端设计基本思路是根据服务器对端的 ip和端口 创建一个 endpoint ,然后创建 socket 连接这个 endpoint

    2024年02月12日
    浏览(45)
  • Java Websocket发送文件给Vue客户端接收并上传,实现检测U盘插入并将指定文件上传到服务器功能

    应用环境: B/S架构 需求描述: 1、判断U盘接入 2、扫描U盘指定文件,将满足条件的文件发送给服务器 解决思路: 1、因为bs架构,无法获取本机资源,计划在U盘所在服务器部署websocket服务 2、websocket服务扫描u盘,拿到指定文件,使用session.getBasicRemote().sendBinary(data)分批发送二

    2024年01月15日
    浏览(56)
  • 线上 udp 客户端请求服务端客户端句柄泄漏问题

    本题分别从如下三个方面来分享: 问题描述 自定义连接池的编写 common_pool 的使用 线上有一个业务,某个通服务通知 udp 客户端通过向 udp 服务端(某个硬件设备)发送 udp 包来进行用户上线操作 当同时有大量的请求打到 udp 服务端的时候,udp 服务端的回包可能会在网络环境

    2024年02月09日
    浏览(66)
  • Redis中的Java客户端

    Jedis是一个Java实现的Redis客户端连接工具。 Jedis使用非常简单,直接引入依赖。基于默认参数的Jedis连接池,初始化连接池类(使用默认连接池参数)JedisPool,获取一个Jedis连接Jedis jedis=jp.getResource()。 Jedis是线程不安全的,多线程使用同一个Jedis实例,会出现并发问题,原因是

    2024年01月17日
    浏览(49)
  • 关于ios客户端与web网页js交互

    iOS与JS的交互可以通过以下几种方式实现: 1.使用UIWebView或WKWebView加载Html页面并在其中添加Javascript脚本,通过WebView的代理方法捕获Javascript脚本发出的事件,从而实现与iOS原生代码的交互。 2.使用JSBridge框架,它提供了一种简单的方式在Javascript和iOS原生代码之间进行通信。

    2024年02月10日
    浏览(46)
  • 路由器中AP、路由、中继、桥接、客户端模式之间的区别

    在TP-Link迷你无线路由器上一般有AP(接入点)模式、Router(无线路由)模式、Repeater(中继)模式、Bridge(桥接)模式、Client(客户端)模式;但很多用户都不清楚这几种模式的之间的区别,下面将对这几种模式进行详细的介绍。 注意:有的型号的TP-Link 迷你无线路由器上只有AP(接

    2024年02月08日
    浏览(50)
  • netty构建udp服务器以及发送报文到客户端客户端详细案例

    目录 一、基于netty创建udp服务端以及对应通道设置关键 二、发送数据 三、netty中的ChannelOption常用参数说明 1、ChannelOption.SO_BACKLOG 2、ChannelOption.SO_REUSEADDR 3、ChannelOption.SO_KEEPALIVE 4、ChannelOption.SO_SNDBUF和ChannelOption.SO_RCVBUF 5、ChannelOption.SO_LINGER 6、ChannelOption.TCP_NODELAY 以上代码中

    2024年04月09日
    浏览(79)
  • 服务器异步客户端

    internal class MessageManagerT:SingletonMessageManagerT {     Dictionaryint, ActionT MsgDic = new Dictionaryint, ActionT();     public void OnAddListen(int id,ActionT action)     {         if(MsgDic.ContainsKey(id))         {             MsgDic[id] += action;         }         else         {             MsgDic.Add(id, ac

    2024年04月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包