| 8.4.1 搭建自己的SSR | 您所在的位置：网站首页 › 如何搭建自己的ssr节点账号 › 8.4.1 搭建自己的SSR |
8.4.1 搭建自己的SSR
|
本文为拉勾网大前端高薪训练营第一期笔记 心得体会SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。 3-4-1 搭建自己的SSR Vue SSR 介绍 是什么 官方文档:https://ssr.vuejs.org/ Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案 使用它可以构建同构应用 还是基于原有的 Vue.js 技术栈官方文档的解释:Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可 以在服务器和客户端上运行。 使用场景在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该问的第一个问题是，是否真的需要它。 技术层面: 更快的首屏渲染速度 更好的 SEO业务层面: 不适合管理系统 适合门户资讯类网站，例如企业官网、知乎、简书等 适合移动网站 如何实现 Vue SSR(1)基于 Vue SSR 官方文档提供的解决方案 官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。 该方式需要你熟悉 Vue.js 本身，并且具有 Node.js 和 webpack 的相当不错的应用经验。 (2)Nuxt.js 开发框架 NUXT提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过 Nuxt.js 可以快速的使用 Vue SSR 构建同构应用。 Vue SSR 基本使用接下来我们以 Vue SSR 的官方文档为参考，来学习一下它的基本用法。 渲染一个 Vue 实例 目标: 了解如何使用 VueSSR 将一个 Vue 实例渲染为 HTML 字符串 首先我们来学习一下服务端渲染中最基础的工作:模板渲染。 说白了就是如何在服务端使用 Vue 的方式解析替换字符串。 在它的官方文档中其实已经给出了示例代码，下面我们来把这个案例的实现过程以及其中含义演示一下。 mkdir demo01 cd demo01 npm install vue vue-server-rendererdemo01/index.js : // 第 1 步:创建一个 Vue 实例 const Vue = require("vue") const app = new Vue({ template: `{ { message }}`, data: { message: "Hello World", }, }) // 第 2 步:创建一个 renderer const renderer = require("vue-server-renderer").createRenderer() // 第 3 步:将 Vue 实例渲染为 HTML renderer.renderToString(app, (err, html) => { if (err) throw err console.log(html) // => Hello World }) // 在 2.5.0+，如果没有传入回调函数，则会返回 Promise: renderer .renderToString(app).then((html) => { console.log(html) }) .catch((err) => { console.error(err) }) 与服务器集成在 Node.js 服务器中使用时相当简单直接，例如 Express。 首先安装 Express 到项目中: 然后使用 Express 创建一个基本的 Web 服务: npm i express const express = require("express") const app = express() app.get("/", (req, res) => { res.send("Hello World!") }) app.listen(3000, () => console.log("app listening at http://localhost:port")) //启动 Web 服务: //在 Web 服务中渲染 Vue 实例: nodemon index.js const Vue = require("vue") const server = require("express")() const renderer = require("vue-server-renderer").createRenderer() server.get("*", (req, res) => { const app = new Vue({ data: { url: req.url, }, template: 访问的 URL 是: { { url }}, }); renderer.renderToString(app, (err, html) => { if (err) { res.status(500).end("Internal Server Error") return } //or res.setHeader('Content-Type', 'text/html; charset=utf8') res.end( Hello < /title> ${ html } < /body> ) }); }); server.listen(8080) 使用一个页面模板 const renderer = require('vue-server-renderer').createRenderer({ template: fs.readFileSync('./index.template.html', 'utf-8') }) renderer.renderToString(app, (err, html)=>{ if(err){return res.status(500).end('Internal Server Error.')} res.setHeader('Content-Type', 'text/html; charset=utf8') res.end(html) })index.template.html内容 { { { meta.inject().title.text() }}} { { { meta.inject().meta.text() }}} 在模板中使用外部数据index.template.html { { title }} { { {meta}}} renderer.renderToString(app, { title: '拉勾教育', meta: `{ if(err){return res.status(500).end('Internal Server Error.')} res.setHeader('Content-Type', 'text/html; charset=utf8') res.end(html) })需要重新启动node server.js生效 构建流程
图1 之前的做法只有服务端bundle，没有客户端bundle 项目结构 src ├── components │ ├── Foo.vue │ ├── Bar.vue │ └── Baz.vue ├── App.vue ├── app.js # 通用 entry(universal entry) ├── entry-client.js # 仅运行于浏览器 └── entry-server.js # 仅运行于服务器安装依赖 npm i vue vue-server-renderer express cross-env vue: Vue.js 核心库 vue-server-renderer: Vue 服务端渲染工具 |
【本文地址】