【三十天精通Vue 3】第十七天 Vue 3的服务器渲染详解

news/2024/12/2 19:50:49/

请添加图片描述

✅创作者：陈书予
🎉个人主页：陈书予的个人主页
🍁陈书予的个人社区，欢迎你的加入: 陈书予的社区
🌟专栏地址: 三十天精通 Vue 3

文章目录

    • 引言
    • 一、Vue 3 服务器端渲染概述
      • 1.1 服务器端渲染的概念
      • 1.2 Vue 3 中的服务器端渲染
      • 1.3 Vue 3 服务器端渲染的优势和劣势
    • 二、Vue 3 服务器端渲染的基础
      • 2.1 服务器端渲染的基础配置
      • 2.2 使用 Vite 进行服务器端渲染
      • 三、Vue 3 服务器端渲染实践
      • 3.1 服务器端渲染的基本步骤
      • 3.2 服务器端渲染中的路由处理
      • 3.3 服务器端渲染中的数据获取
      • 3.4 服务器端渲染中的 CSS 处理
      • 3.5 服务器端渲染中的性能优化
    • 四、Vue 3 服务器端渲染最佳实践
      • 4.1 服务器端渲染的最佳实践
      • 4.2 在 Vue 3 中的服务器端渲染最佳实践
    • 五、Vue 3 服务器端渲染常见问题及解决方案
      • 5.1 如何处理异步数据
      • 5.2 如何处理动态路由
      • 5.3 如何处理样式
      • 5.4 如何处理状态管理
      • 5.5 如何处理 SEO

引言

Vue 3 是一款非常流行的前端框架，它提供了一系列强大的功能来构建现代化的Web应用程序。其中，服务器端渲染（Server Side Rendering，SSR）是Vue 3 的一个非常重要的特性，它可以显著提高应用程序的性能和SEO优化效果。本篇文章将对Vue 3 服务器端渲染进行详细的介绍和分析，包括基础概念、基础配置、实践和最佳实践等内容。

一、Vue 3 服务器端渲染概述

1.1 服务器端渲染的概念

服务器端渲染（Server Side Rendering，SSR）是一种将Web页面在服务器端预先渲染成HTML字符串，然后将其直接发送给客户端浏览器的技术。与传统的客户端渲染（Client Side Rendering，CSR）相比，服务器端渲染可以提高页面加载速度、SEO效果和用户体验。

1.2 Vue 3 中的服务器端渲染

Vue 3 提供了一个官方的服务器端渲染方案，可以将Vue应用程序渲染成HTML字符串，并在服务器端生成静态HTML文件。Vue 3 的服务器端渲染采用了一些新的特性，如Composition API和Teleport等，可以更好地支持服务器端渲染的需求。

1.3 Vue 3 服务器端渲染的优势和劣势

Vue 3 服务器端渲染的优势包括：

  • 提高页面加载速度：由于服务器端已经将页面渲染成HTML字符串，客户端只需要下载和解析HTML即可展示页面，而无需等待JavaScript代码下载和执行。
  • 改善SEO效果：搜索引擎爬虫可以直接抓取服务器端渲染后的HTML页面，提高了网站在搜索引擎中的排名。
  • 提高用户体验：页面渲染速度更快，用户能够更快地看到内容，减少了等待时间。

Vue 3 服务器端渲染的劣势包括：

  • 服务器端渲染的实现较为复杂，需要对服务器端的运行环境、路由配置、数据获取和CSS处理等方面进行特别的考虑和处理。
  • 服务器端渲染的性能消耗较大，需要消耗更多的服务器资源。

二、Vue 3 服务器端渲染的基础

2.1 服务器端渲染的基础配置

在进行 Vue 3 服务器端渲染之前，需要进行一些基础配置，包括安装相关的依赖和设置一些基本的配置项。下面是一些常用的服务器端渲染配置：

  1. 安装依赖

在进行服务器端渲染之前，需要安装相关的依赖。可以使用以下命令来安装依赖：

npm install vue vue-server-renderer express

其中，vue 是 Vue 3 的核心库，vue-server-renderer 是服务器端渲染相关的库，express 是一个常用的 Node.js Web 框架。

  1. 配置服务器端入口文件

创建服务器端入口文件 server.js，该文件中包含服务器的基本配置和路由处理。以下是一个基本的服务器端入口文件示例：

const express = require('express')
const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')const app = express()// 服务器端路由处理
app.get('*', async (req, res) => {// 创建应用实例const app = createSSRApp({// 应用程序选项})try {// 渲染应用程序const html = await renderToString(app)res.send(html)} catch (err) {res.status(500).send('Internal Server Error')}
})// 启动服务器
app.listen(3000, () => {console.log('Server running at http://localhost:3000')
})

在该示例中，我们使用 Express 框架来创建了一个基本的服务器，并对所有的请求进行了路由处理。当收到请求时，服务器会创建一个应用实例，然后使用 renderToString 方法将应用渲染成 HTML 字符串，并将其发送回客户端。

  1. 配置客户端入口文件

创建客户端入口文件 client.js，该文件包含了客户端的基本配置和路由处理。以下是一个基本的客户端入口文件示例：

import { createApp } from 'vue'
import App from './App.vue'// 创建应用实例
const app = createApp(App)// 启动应用
app.mount('#app')

在该示例中，我们使用 Vue 3 的 createApp 方法来创建一个应用实例，并使用 mount 方法将其挂载到 HTML 页面中。

2.2 使用 Vite 进行服务器端渲染

Vite 是一个基于浏览器原生 ES imports 开发的前端构建工具，它能够实现快速的冷启动和热更新，同时支持服务器端渲染。

在使用 Vite 进行服务器端渲染时，我们需要按照以下步骤进行配置：

  1. 安装相关依赖
bashCopy code
npm install vite vue-server-renderer express

其中，vite 是 Vite 的核心依赖，vue-server-renderer 是 Vue 3 服务器端渲染的核心依赖，express 则是用于搭建服务器的依赖。

  1. 创建 Vite 配置文件

在项目根目录下创建一个名为 vite.config.js 的文件，用于配置 Vite 的相关参数。具体配置可以参考 Vite 官方文档进行设置。

const { createServer: createViteServer } = require('vite')
const { createRenderer } = require('vue-server-renderer')
const express = require('express')const app = express()const isProd = process.env.NODE_ENV === 'production'async function createServer() {const viteServer = await createViteServer({server: {middlewareMode: true,},})app.use(viteServer.middlewares)const renderer = createRenderer({template: `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>{{ title }}</title></head><body><!--vue-ssr-outlet--><script src="/@vite/client"></script><script src="/src/entry-server.js"></script></body></html>`,})app.get('*', async (req, res) => {const context = {url: req.url,title: 'Vue 3 SSR',}try {const html = await renderer.renderToString(context)res.send(html)} catch (err) {console.error(err)res.status(500).send('Internal Server Error')}})app.listen(3000, () => {console.log('Server running at http://localhost:3000')})
}createServer()

上述代码中，我们首先引入了相关依赖，然后创建了一个 Express 应用程序实例。在应用程序中，我们使用 Vite 的 middlewares 中间件来处理静态资源文件的请求。接着，我们创建了一个 Vue 3 服务器端渲染的渲染器实例，并在 Express 应用程序中创建了一个处理所有路由的处理程序。当请求到来时，我们将请求的 URL 以及页面标题传递给渲染器实例进行页面渲染，最终将渲染结果发送给客户端。

  1. 创建入口文件

创建入口文件的步骤如下：

  1. 在项目根目录下创建一个名为 entry-server.js 的文件，该文件将用于服务器端渲染的入口。
  2. 在 entry-server.js 中导入 createApp 函数和根组件。
  3. 创建一个函数 renderToString，该函数将用于渲染页面。
  4. 创建一个函数 createServerRenderer，该函数将返回一个对象，其中包含一个函数 renderToString，这个函数将在服务器端使用。
  5. 导出 createServerRenderer 函数。

下面是示例代码：

// entry-server.jsimport { createApp } from './app'
import { renderToString } from '@vue/server-renderer'const { app, router } = createApp()function renderToStringWithRouter(url) {router.push(url)return renderToString(app)
}export default function createServerRenderer() {return {renderToString: renderToStringWithRouter}
}

在该示例中，我们使用 @vue/server-renderer 中的 renderToString 函数进行渲染。我们还定义了一个名为 createServerRenderer 的函数，并将其导出。该函数返回一个对象，其中包含一个名为 renderToString 的函数。在这个示例中，我们创建了一个名为 renderToStringWithRouter 的函数，该函数在渲染之前调用路由器来设置正确的路由状态。

值得注意的是，在实际项目中，createApp 函数可能会包含其他的插件和组件，具体的内容根据项目的需求而定。

三、Vue 3 服务器端渲染实践

3.1 服务器端渲染的基本步骤

在 Vue 3 中进行服务器端渲染的基本步骤如下：

  1. 创建一个 Vue 实例，并将其挂载到一个空的 HTML 模板中。
  2. 根据路由地址获取需要渲染的组件。
  3. 调用组件的 asyncData 方法获取组件需要的数据。
  4. 将获取到的数据通过 props 传递给组件。
  5. 在服务器端使用 renderToString 方法将 Vue 实例渲染为字符串。
  6. 将渲染后的 HTML 字符串发送给客户端。

3.2 服务器端渲染中的路由处理

在服务器端渲染中，路由处理需要特殊注意，因为服务器端的路由与客户端的路由是不一样的。在服务器端渲染中，需要根据请求的路由地址获取对应的组件并进行渲染。

为了实现服务器端的路由处理，可以使用 Vue Router 提供的 createRouter 方法和 createMemoryHistory 方法来创建路由实例和路由历史实例。创建完路由实例和路由历史实例后，可以使用 router.push 方法来根据请求的路由地址进行路由跳转，并获取需要渲染的组件。

import { createMemoryHistory, createRouter } from 'vue-router'const routes = [// 定义路由规则// ...
]// 创建路由实例和路由历史实例
const router = createRouter({history: createMemoryHistory(),routes
})// 在服务器端通过路由跳转获取需要渲染的组件
router.push(context.url)

3.3 服务器端渲染中的数据获取

在客户端渲染中，通常使用异步请求来获取组件需要的数据。但在服务器端渲染中，由于没有浏览器环境，无法使用异步请求，需要使用另外的方式来获取数据。

为了解决这个问题，可以在组件中定义一个 asyncData 方法，该方法返回一个 Promise 对象，在服务器端渲染时调用该方法来获取组件需要的数据。在调用 asyncData 方法时，需要传递路由参数和 store 实例，以便在方法中使用。

import { createStore } from 'vuex'const store = createStore({// ...
})export default {// ...async asyncData({ params, store }) {await store.dispatch('fetchData', params.id)}
}

3.4 服务器端渲染中的 CSS 处理

在服务器端渲染中，需要注意 CSS 的处理，因为在客户端渲染中，浏览器会自动加载和解析 CSS，但在服务器端渲染中，没有浏览器环境，需要手动处理 CSS。

为了解决这个问题，可以使用一些工具来处理 CSS，如使用 vue-server-renderer 提供的 renderStyles 方法来生成 CSS 字符串，并在 HTML 模板中添加 <style> 标签来引入 CSS。

import { createSSRApp, renderToString } from 'vue'
import { renderStyles } from '@vue/server-renderer'const app = createSSRApp(App)// 渲染 Vue 实例为字符串
const html = await renderToString(app)// 生成 CSS 字符串
const css = await renderStyles()// 在 HTML 模板中添加 CSS
const finalHtml = `<html><head><style>${css}</style></head><body>${html}</body></html>
`

除此之外，还可以使用一些 CSS 预处理器或者 CSS-in-JS 的方式来处理 CSS。例如，可以使用 sass-loader 来编译 SASS 文件，并将生成的 CSS 字符串添加到 HTML 模板中。另外，还可以使用 CSS-in-JS 的库如 styled-components 来在组件内定义样式，并在服务器端渲染时生成对应的 CSS 字符串。

3.5 服务器端渲染中的性能优化

以下是在Vue 3服务器端渲染中进行性能优化的几个步骤：

  1. 使用异步组件：在Vue 3中，可以使用 defineAsyncComponent 方法来定义异步组件。当组件被渲染时，该方法会返回一个Promise对象，组件将在该Promise对象解析后渲染。这可以减少初始加载的文件大小和组件的数量。
  2. 缓存组件：在服务器端渲染中，组件的重复渲染是常见的情况。为了避免重复渲染，可以使用缓存技术来缓存已经渲染的组件，以便在后续请求中重复使用。
  3. 优化数据获取：在服务器端渲染中，由于没有浏览器环境，无法使用异步请求来获取数据。因此，在获取数据时，需要尽可能地减少数据请求的次数，可以通过将多个数据请求合并为一个请求，或使用缓存来减少数据请求的次数。
  4. 优化CSS：在服务器端渲染中，需要特别注意CSS的处理，因为在服务器端渲染中，CSS是同步加载的。为了避免CSS阻塞渲染，可以将CSS提取为独立的文件，或使用内联CSS。
  5. 使用CDN：使用CDN可以提高静态文件的加载速度，并减少服务器负载。可以将静态文件存储在CDN上，并在服务器端渲染中使用CDN链接来加载静态文件。

四、Vue 3 服务器端渲染最佳实践

4.1 服务器端渲染的最佳实践

以下是服务器端渲染的最佳实践：

  1. 使用异步组件和动态导入来减小打包文件的大小，提高服务器端渲染的性能。
  2. 服务器端渲染需要特别注意内存泄漏问题，要及时释放不再使用的组件、实例和资源。
  3. 避免使用浏览器 API 和 DOM 操作，因为在服务器端没有浏览器环境。
  4. 避免在服务器端渲染中使用全局变量，因为不同请求之间共享同一个全局变量可能会导致意外的问题。
  5. 避免在服务器端渲染中使用单例模式，因为单例模式会导致不同请求之间共享同一个实例，可能会导致意外的问题。

4.2 在 Vue 3 中的服务器端渲染最佳实践

以下是在 Vue 3 中的服务器端渲染的最佳实践：

  1. 使用 @vue/server-renderer 包提供的 createRenderer 方法来创建服务器端渲染实例。
  2. 使用 createMemoryHistory 方法来创建路由历史实例，使用 createRouter 方法来创建路由实例。
  3. 在服务器端渲染中使用 asyncData 方法来获取组件需要的数据。
  4. 在服务器端渲染中使用 onBeforeRender 方法来进行一些操作，例如初始化一些全局变量。
  5. 使用 @vue/server-renderer 包提供的 renderToString 和 renderToStream 方法来将 Vue 实例渲染为字符串或流。

五、Vue 3 服务器端渲染常见问题及解决方案

5.1 如何处理异步数据

在服务器端渲染中，由于没有浏览器环境，无法使用异步请求。为了解决这个问题，可以在组件中定义一个 asyncData 方法，该方法返回一个 Promise 对象，在服务器端渲染时调用该方法来获取组件需要的数据。在调用 asyncData 方法时，需要传递路由参数和 store 实例，以便在方法中使用。在客户端渲染时，可以在组件的 mounted 钩子函数中获取数据。

5.2 如何处理动态路由

在服务器端渲染中，动态路由需要特殊处理。需要在服务器端通过路由跳转获取需要渲染的组件，并将路由参数传递给组件。可以使用 Vue Router 提供的 createRouter 方法和 createMemoryHistory 方法来创建路由实例和路由历史实例，在服务器端通过路由跳转获取需要渲染的组件。

5.3 如何处理样式

在服务器端渲染中，需要将组件的样式打包成一个 CSS 文件，并在 HTML 模板中引入。可以使用 Vue CLI 提供的插件 @vue/cli-plugin-ssr 来自动化配置服务器端渲染的样式处理。该插件会将组件的样式提取出来，打包成一个 CSS 文件，并在 HTML 模板中引入该文件。

5.4 如何处理状态管理

在服务器端渲染中，由于每个请求都是一个新的实例，所以需要将状态管理实例在每个请求中重新创建。可以在服务器端创建一个新的状态管理实例，并将其传递给组件。在客户端渲染时，可以将服务器端传递的状态合并到客户端状态中。

5.5 如何处理 SEO

在服务器端渲染中，由于 HTML 是由服务器端生成的，所以可以在服务器端设置 HTML 的一些 SEO 相关的标签，例如 title、meta 等。可以在 Vue 3 中使用 createHead 方法来创建一个头部管理实例，在组件中使用该实例来设置 HTML 的头部标签。在服务器端渲染时，可以将头部标签的内容添加到 HTML 模板中。
在这里插入图片描述


http://www.ppmy.cn/news/53120.html

相关文章

Ubuntu更新软件下载更新与移除

Ubuntu更新软件下载更新与移除

目录 一、更新软件源 二、下载与安装软件 三、如何移除软件 四、Ubuntu商店下载软件 一、更新软件源 更新Ubuntu软件源的操作步骤&#xff0c;更新软件源的目的就是&#xff0c;将在Ubuntu官网的软件源更改到本地&#xff0c;也就是国内的软件源&#xff0c;这样的话下载安…
阅读更多...
对promise的理解分享

对promise的理解分享

文章目录 Promise的概念&#xff0c;Promise有几种状态Promise有哪些参数Promise的常见方法 Promise的概念&#xff0c;Promise有几种状态 Promise是ES6中的新增的异步处理方法&#xff0c;主要是用于解决ES5中使用回调函数产生的地狱回调的问题Promise有三种状态,pedding准备…
阅读更多...
网络安全岗位面试题大全：解析各个分支岗位的面试题目，帮助你上岸大厂

网络安全岗位面试题大全：解析各个分支岗位的面试题目，帮助你上岸大厂

网络安全是一个广泛的领域&#xff0c;涵盖了许多不同的岗位和分支。我整理了网络安全各个岗位分支的面试题目&#xff1a; 安全工程师/系统管理员 您如何确保网络系统的安全性和保密性&#xff1f;您采用了哪些技术和工具&#xff1f;请描述一下您在过去工作中遇到的最具挑战…
阅读更多...
4个很多人都不知道的现代JavaScript技巧

4个很多人都不知道的现代JavaScript技巧

JavaScript在不断的进化和升级&#xff0c;越来越多的新特性让我们的代码变得更加简洁。因此&#xff0c;今天这篇文章&#xff0c;我将跟大家分享 4 个不常用的 JavaScript 运算符。让我们一起研究它们。 1.可选的链接运算符 这个功能非常好用&#xff0c;它可以防止我的代码…
阅读更多...
AlgoC++第八课：手写BP

AlgoC++第八课：手写BP

目录 手写BP前言1. 数据加载2. 前向传播3. 反向传播总结 手写BP 前言 手写AI推出的全新面向AI算法的C课程 Algo C&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考。 本次课程主要是手写 BP 代码 课程大纲可看下面的思维导图 1. 数据加载 我们首先来实现下MNIST…
阅读更多...
迅为iTOP-i.MX6ULL开发板I2C驱动程序实现 I2C通信

迅为iTOP-i.MX6ULL开发板I2C驱动程序实现 I2C通信

在第 67.1 章节学习 i2c 的时候&#xff0c;我们是在应用层操作设备节点对 i2c 设备进行读写的&#xff0c;那么如果我们在 驱动里面对 i2c 设备进行读写要怎么办呢&#xff1f;本章节我们将来学习。 我们复制第 67.3 章节的代码&#xff0c;在此基础上进行修改。我们在应用里…
阅读更多...
Dockere-Compose迁移Gitea部署

Dockere-Compose迁移Gitea部署

Dockere-Compose迁移Gitea部署 ps: 江湖不是打打杀杀&#xff0c;江湖是人情事故。 解释&#xff1a; Gitea&#xff1a;类似于Git的代码版本管理工具。Docker&#xff1a;Docker-Compose&#xff1a; Docker命令&#xff1a; 查看镜像&#xff1a;docker images 删除镜像…
阅读更多...
【离散系统】传递函数和状态空间方程离散化

【离散系统】传递函数和状态空间方程离散化

本文如有错误&#xff0c;恳请指正。 目录 离散系统 采样控制系统 数字控制系统 信号采样 采样定理&#xff08;香农定理&#xff09; 信号保持—零阶保持器 Z变换 Z 变换方法 级数求和法 部分分式法 基本定理 Z反变换 Z反变换方法 长除法 部分分式法&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023