vue-server-renderer实现服务端渲染

news/2024/12/23 6:39:17/

vue-server-renderer实现服务端渲染

简单认识vue-server-renderer:

是 Vue.js 官方提供的一个库,用于将 Vue 组件渲染成 HTML 字符串或流,通常用于服务端渲染。
在这里插入图片描述

具体的咱们vue-server-renderer如何实现
1、预编译组件:根据 Vue 组件的模板、数据等信息,生成一份优化后的渲染函数。

2、创建一个新的 Vue 实例:用于在服务端执行组件内部的所有生命周期钩子和异步操作。

3、渲染组件到虚拟 DOM:使用预编译的渲染函数将组件渲染成虚拟 DOM。

4、序列化虚拟 DOM:将虚拟 DOM 转换为字符串形式的 HTML。

5、将 HTML 发送给客户端。

具体流程如下:
在这里插入图片描述

具体实现一个简易版的SSR如下(express实现):

const express = require('express')
const Vue = require('vue');
const vueRenderer = require('vue-server-renderer').createRenderer()
const app = express()app.get('/test', (req, res) => {const vm = new Vue({data: { message: 'Hello, World, vitos' },template: '<div>{{ message }}</div>'})vueRenderer.renderToString(vm, (err, html) => {if (err) res.end("505");res.end(`<!DOCTYPE html><html><head><title>My App</title></head><body>${html}</body></html>`)})
})
app.listen(3000, () => {console.log('Server started on http://localhost:3000')
})

作者:薇薇的憨宝


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

相关文章

太阳能发电机的优缺点是什么?

优点缺点没有燃料昂贵的前期投资清洁可再生能源充电慢安静且低维护可用功率有限 太阳能发电机的优势 来自太阳的免费燃料 传统的燃气发电机需要您不断购买燃料。使用太阳能发电机&#xff0c;没有燃料成本。只需设置您的太阳能电池板&#xff0c;享受自由的阳光&#xff01…

两种排序算法

1、冒泡排序 基本思想&#xff1a;现在有一个数组arr {12,35,99,18,76}&#xff0c;需要将其从小到大排序 第一次冒泡&#xff1a;首先我们将数组第一个数&#xff08;arr[0]&#xff09;和第二个数&#xff08;arr[1]&#xff09;进行比较&#xff0c;如果第二个数比第一个数…

Nucleo-F411RE (STM32F411)LL库体验 10 - RT-Thread nano finsh的移植

Nucleo-F411RE &#xff08;STM32F411&#xff09;LL库体验 10 - RT-Thread nano finsh的移植 1、Makefile中添加finsh的编译 编译报错如下&#xff1a; 在rtconfig.h添加#include “finsh_config.h” 继续编译&#xff0c;继续报错&#xff1a; 这里是个WEAK函数&#xff…

实验篇(7.2) 14. 站对站安全隧道 - 多条隧道冗余(FortiGate-IPsec) ❀ 远程访问

【简介】IPsec VPN虽然价廉物美&#xff0c;但是由运营商原因&#xff0c;偶尔出现不稳定情况&#xff0c;例如访问慢甚至断开等&#xff0c;好在现在大多数企业都有二条甚至更多条宽带&#xff0c;我们可以创建多条IPsec VPN&#xff0c;来保证不间断访问。 实验要求与环境 Ol…

iso体系认证需要什么材料

一、需要什么材料 1&#xff09;营业执照的复印件&#xff1b; 2&#xff09;主管机关的生产或服务许可证的复印件&#xff1b; 3&#xff09;质量、卫生等机关的许可证的复印件&#xff1b; 4&#xff09;质量手册和程序文件&#xff1b; 5&#xff09;记录清单。 其中&#x…

双软认证需要材料,怎么办理

双软认证需要材料&#xff0c;怎么办理   双软认证的概述&#xff1a;双软认证是对企业知识产权的一种保护方式&#xff0c;它具体指的是软件产品登记和软件企业认定&#xff0c;企业申请了双软认证不仅可以获得软件产品和软件企业的认证资质&#xff0c;还可享受国家给予软件…

双软认证办理流程,需要材料

双软认证办理流程&#xff0c;需要材料 一、什么是双软 双软即软件产品与软件企业认定评估的简称。 二、双软认定评估流程 在双软评估之前需取得计算机软件著作权/其他知识产权和软件产品的测评报告。 企业取得计算机软件著作权/其他知识产权和软件产品的测评报告之后&#x…

绿色工厂认证需要什么材料?

一、绿色工厂文件政策依据&#xff1a; 1、省级&#xff1a;为贯彻落实工信部关于加快绿色制造体系建设工作要求&#xff0c;全面落实《加快绿色制造体系建设三年行动方案&#xff08;2021—2023&#xff09;》&#xff0c;提升我省绿色制造体系建设的质量和水平&#xff0c;加…