vue服务端渲染SSR

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

一:ssr的理解
1、服务端渲染 Server Side Render
SSR解决方案,后端渲染出完整的首屏的dom结构返回,前端拿到的内容包括首屏及完整spa结构,应用激活后依然按照spa方式运行,这种页面渲染方式被称为服务端渲染 (server side render)
vue服务端渲染SSR
二:Vue SSR实战
1、新建工程
vue-cli创建工程即可

vue create ssr

2、安装依赖

npm install vue vue-server-renderer express -D

3、启动脚本
创建一个express服务器,将vue ssr集成进来,./server/02-simple-ssr.js

// 导入express作为渲染服务器
const express = require("express");
// 导入Vue用于声明待渲染实例
const Vue = require("vue");
// 导入createRenderer用于获取渲染器
const { createRenderer } = require("vue-server-renderer");
// 创建express实例
const app = express();
// 获取渲染器
const renderer = createRenderer();
// 待渲染vue实例
const vm = new Vue({
 data: {
  name: "开课吧"
},
 template: `
  <div >
    <h1>{{name}}</h1>
  </div>
 `
});
app.get("/", async function(req, res) {
 // renderToString可以将vue实例转换为html字符串
 // 若未传递回调函数,则返回Promise
 try {
  const html = await renderer.renderToString(vm);
  res.send(html);
} catch (error) {
  res.status(500).send("Internal Server Error");
}
});
app.listen(3000, () => {
 // eslint-disable-next-line no-console
 console.log("启动成功");
});

三:路由
路由支持仍然使用vue-router
1、安装
若未引入vue-router则需要安装

npm i vue-router -s
vue add router

2、配置
创建@/router/index.js

import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
Vue.use(Router);
//导出工厂函数
export function createRouter() {
 return new Router({
  routes: [
  { path: "/", component: Home },
  { path: "/about", component: About }
 ]
});
}

四:构建
对于客户端应用程序和服务器应用程序,我们都要使用 webpack 打包 - 服务器需要服务器 bundle然后用于服务器端渲染(SSR),而客户端 bundle会发送给浏览器,用于混合静态标记。
1、构建流程
vue服务端渲染SSR
2、代码结构

src
├── main.js # 用于创建vue实例
├── entry-client.js # 客户端入口,用于静态内容“激活”
└── entry-server.js # 服务端入口,用于首屏内容渲染

3、Vue实例创建
main.js 是负责创建vue实例,每次请求均会有独立的vue实例创建。创建main.js:

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router";
// 导出Vue实例工厂函数,为每次请求创建独立实例
// 上下文用于给vue实例传递参数
export function createApp(context) {
 const router = createRouter();
 const app = new Vue({
  router,
  context,
  render: h => h(App)
});
 return { app, router };
}

4、服务端入口
服务端入口文件src/entry-server.js

import { createApp } from "./main";
// 返回一个函数,接收请求上下文,返回创建的vue实例
export default context => {
 // 这里返回一个Promise,确保路由或组件准备就绪
 return new Promise((resolve, reject) => {
  const { app, router } = createApp(context);
  // 跳转到首屏的地址
  router.push(context.url);
  // 路由就绪,返回结果
  router.onReady(() => {
   resolve(app);
 }, reject);
});
};

5、客户端入口
客户端入口只需创建vue实例并执行挂载,这一步称为激活。创建entry-client.js:

import { createApp } from "./main";
// 创建vue、router实例
const { app, router } = createApp();
// 路由就绪,执行挂载
router.onReady(() => {
 app.$mount("#app");
});

6、webpack配置
安装依赖

npm install webpack-node-externals lodash.merge -D

具体配置,vue.config.js

// 两个插件分别负责打包客户端和服务端
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
// 根据传入环境变量决定入口文件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
 css: {
  extract: false
},
 outputDir: './dist/'+target,
 configureWebpack: () => ({
  // 将 entry 指向应用程序的 server / client 文件
  entry: `./src/entry-${target}.js`,
  // 对 bundle renderer 提供 source map 支持
  devtool: 'source-map',
  // target设置为node使webpack以Node适用的方式处理动态导入,
  // 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。
  target: TARGET_NODE ? "node" : "web",
  // 是否模拟node全局变量
  node: TARGET_NODE ? undefined : false,
  output: {
   // 此处使用Node风格导出模块
   libraryTarget: TARGET_NODE ? "commonjs2" : undefined
 },
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外置化应用程序依赖模块。可以使服务器构建速度更快,并生成较小的打包文件。
  externals: TARGET_NODE
   ? nodeExternals({
     // 不要外置化webpack需要处理的依赖模块。
     // 可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件,
     // 还应该将修改`global`(例如polyfill)的依赖模块列入白名单
     whitelist: [/\.css$/]
   })
  : undefined,
  optimization: {
   splitChunks: undefined
 },
  // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
  // 服务端默认文件名为 `vue-ssr-server-bundle.json`
  // 客户端默认文件名为 `vue-ssr-client-manifest.json`。
  plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
}),
 chainWebpack: config => {
  // cli4项目添加
  if (TARGET_NODE) {
    config.optimization.delete('splitChunks')
 }
  
  config.module
  .rule("vue")
  .use("vue-loader")
  .tap(options => {
    merge(options, {
     optimizeSSR: false
   });
  });
}
};

7、脚本配置
安装依赖

npm i cross-env -D

定义创建脚本,package.json

"scripts": {
  "build:client": "vue-cli-service build",
  "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
  "build": "npm run build:server && npm run build:client"
},

执行打包:npm run build

8、宿主文件
最后需要定义宿主文件,修改./public/index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>
  <!--vue-ssr-outlet-->
 </body>
</html>

9、服务器启动文件
修改服务器启动文件,现在需要处理所有路由,./server/04-ssr.js

// 加载本地文件
const fs = require("fs");
// 处理url
const path = require("path");
const express = require('express')
const server = express()
// 获取绝对路径
const resolve = dir => {
  return path.resolve(__dirname, dir)
}
// 第 1 步:开放dist/client目录,关闭默认下载index页的选项,不然到不了后面路由
// /index.html
server.use(express.static(resolve('../dist/client'), {index: false}))
// 第 2 步:获得一个createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
// 第 3 步:导入服务端打包文件
const bundle = require(resolve("../dist/server/vue-ssr-server-bundle.json"));
// 第 4 步:创建渲染器
const template = fs.readFileSync(resolve("../public/index.html"), "utf-8");
const clientManifest = require(resolve("../dist/client/vue-ssr-client-
manifest.json"));
const renderer = createBundleRenderer(bundle, {
 runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
 template, // 宿主文件
 clientManifest // 客户端清单
});
// 路由是通配符,表示所有url都接受
server.get('*', async (req,res)=>{
  console.log(req.url);
 
 // 设置url和title两个重要参数
 const context = {
  title:'ssr test',
  url:req.url // 首屏地址
}
 const html = await renderer.renderToString(context);
 res.send(html)
})
server.listen(3000, function() {
 // eslint-disable-next-line no-console
 console.log(`server started at localhost:${port}`);
});

10、整合Vuex
安装vuex

npm install -S vuex

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore () {
 return new Vuex.Store({
  state: {
    count:108
 },
  mutations: {
add(state){
      state.count += 1;
   }
 }
})
}

挂载store,main.js

import { createStore } from './store'
export function createApp (context) {
  // 创建实例
  const store = createStore()
  const app = new Vue({
    store, // 挂载
    render: h => h(App)
 })
  return { app, router, store }
}

使用,.src/components/Index.vue

<h2 @click="$store.commit('add')">{{$store.state.count}}</h2>

11、数据预取
服务器端渲染的是应用程序的"快照",如果应用依赖于一些异步数据,那么在开始渲染之前,需要先预取和解析好这些数据。
异步数据获取,store/index.js

export function createStore() {
 return new Vuex.Store({
  mutations: {
   // 加一个初始化
   init(state, count) {
    state.count = count;
  },
 },
  actions: {
   // 加一个异步请求count的action
   getCount({ commit }) {
    return new Promise(resolve => {
     setTimeout(() => {
      commit("init", Math.random() * 100);
      resolve();
    }, 1000);
   });
  },
 },
});
}

组件中的数据预取逻辑,Index.vue

export default {
 asyncData({ store, route }) { // 约定预取逻辑编写在预取钩子asyncData中
  // 触发 action 后,返回 Promise 以便确定请求结果
  return store.dispatch("getCount");
}
};

服务端数据预取,entry-server.js

import { createApp } from "./app";
export default context => {
 return new Promise((resolve, reject) => {
  // 拿出store和router实例
  const { app, router, store } = createApp(context);
  router.push(context.url);
  router.onReady(() => {
   // 获取匹配的路由组件数组
   const matchedComponents = router.getMatchedComponents();
   
   // 若无匹配则抛出异常
   if (!matchedComponents.length) {
    return reject({ code: 404 });
  }
  
   // 对所有匹配的路由组件调用可能存在的`asyncData()`
   Promise.all(
    matchedComponents.map(Component => {
     if (Component.asyncData) {
      return Component.asyncData({
       store,
       route: router.currentRoute,
     });
    }
   }),
  )
   .then(() => {
     // 所有预取钩子 resolve 后,
     // store 已经填充入渲染应用所需状态
     // 将状态附加到上下文,且 `template` 选项用于 renderer 时,
     // 状态将自动序列化为 `window.__INITIAL_STATE__`,并注入 HTML。
     context.state = store.state;
     
     resolve(app);
   })
   .catch(reject);
 }, reject);
});
};

客户端在挂载到应用程序之前,store 就应该获取到状态,entry-client.js

// 导出store
const { app, router, store } = createApp();
// 当使用 template 时,context.state 将作为 window.__INITIAL_STATE__ 状态自动嵌入到最
终的 HTML // 在客户端挂载到应用程序之前,store 就应该获取到状态:
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__);
}

客户端数据预取处理,main.js文章来源地址https://www.toymoban.com/news/detail-495413.html

Vue.mixin({
 beforeMount() {
  const { asyncData } = this.$options;
  if (asyncData) {
   // 将获取数据操作分配给 promise
   // 以便在组件中,我们可以在数据准备就绪后
   // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
   this.dataPromise = asyncData({
    store: this.$store,
    route: this.$route,
  });
 }
},
});

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

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

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

相关文章

  • 单页面(SPA)与服务端渲染(SSR),概念、区别,优缺点

    什么是单页面应用? 什么是多页面应用? 二者有什么区别? 1、单页面应用与多页面应用: 单页面顾名思义就是整个应用只有一个Html页面,页面的切换其实是组件的切换。这样设计的好处就是不进行页面的切换应用会更加流畅,用户体验好,不需要记载整个页面。良好前后

    2024年02月14日
    浏览(45)
  • Vue.js 3 ssr 中报错Hydration node mismatch: - Client vnode: div - Server rendered DOM:已解决

    该问题其实是由于在开发阶段本地服务器的代码与浏览器的代码不一致导致的问题,可以执行一次build命令,可以解决该问题,实际到部署之后并未复现该问题。 vue.config.js中 app.vue中

    2024年02月16日
    浏览(48)
  • 极致性能优化:前端SSR渲染利器Qwik.js

    前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互,而前端框架的选择对于实现这些目标至关重要。然而,传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背景下,我们引入了 Qwik.js 框架。Qwik.js 不仅

    2024年02月05日
    浏览(64)
  • 什么是 CSR、SSR、SSG、ISR - 渲染模式详解

    本文以 React 、 Vue 为例,介绍下主流的渲染模式以及在主流框架中如何实现上述的渲染模式。 看渲染模式之前我们先看下几个主流框架所提供的相关能力,了解的可跳到下个章节。 这是主流框架最基本的能力,就是将组件渲染到指定的 DOM 节点上。在 React 中所使用的 API 是

    2024年02月11日
    浏览(39)
  • 极致性能优化:前端SSR渲染利器Qwik.js | 京东云技术团队

    前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互,而前端框架的选择对于实现这些目标至关重要。然而,传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背景下,我们引入了 Qwik.js 框架。Qwik.js 不仅

    2024年02月05日
    浏览(41)
  • 前端React篇之哪些方法会触发 React 重新渲染?重新渲染 render 会做些什么?

    在React中,以下方法会触发重新渲染: setState() :当调用组件的setState方法并传入新的状态值时,React会触发重新渲染。 forceUpdate() :可以强制组件重新渲染,不管组件的状态是否发生变化。 props改变 :当组件接收到新的props时,它会进行重新渲染。 context改变 :如果使用了

    2024年04月10日
    浏览(41)
  • UE4中如何对Movie Render Queue进行渲染设置

    Movie Render Queue 的渲染设置用于控制序列的渲染方式。它们包括抗锯齿、自定义控制台命令、输出格式、渲染模式和其他功能。本指南将介绍设置界面、可用设置列表以及将设置保存为预设的能力。 首先在 Unreal Engine 中启用 Movie Render Queue 插件。在 Unreal Engine 菜单中,转到 E

    2024年02月04日
    浏览(49)
  • 【Unity】 Render Streaming 云渲染基本环境搭建及应用(尽量详细,欢迎补充)

    演示所使用的版本: 电脑Win10系统 Unity:2022.3.0 RenderStreaming:3.1.0-exp.6         WebRTC:3.0.0-pre.5(Pre-release)  RenderStreaming WebServer:3.1.0-exp.6 目录 1.安装RenderStreaming 2.安装WebRTC 3.在使用前请确保已安装web服务器和Node.js (1)Node.js的安装和配置 以下是打开“系统属性”界面的补充方

    2024年02月16日
    浏览(41)
  • OpenAI-gym 关于render无法弹出游戏窗口以及想要在训练时不渲染然后在测试时再渲染的解决方案

    你使用的代码可能与你的gym版本不符 在我目前的测试看来,gym 0.23的版本,在初始化env的时候只需要游戏名称这一个实参,然后在需要渲染的时候主动调用render()去渲染游戏窗口,比如: 而在gym0.26的版本,在初始化env的时候你需要加入另一个实参:render_mode,如: 具体参数参

    2023年04月26日
    浏览(30)
  • Vue的SSR介绍

          与传统 SPA 相比,服务器端渲染 (SSR) 对SEO更加友好,方便搜索引擎爬虫抓取,可以直接查看完全渲染的页面,除此之外,SSR能够在更短的时间内渲染出页面内容,让用户有更好的用户体验。 本文将从以下三个模块介绍服务端渲染: 什么是客户端渲染? 什么是服务端

    2024年02月05日
    浏览(34)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包