前端（vue）入门到精通课程，老师在线辅导：联系老师Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
(资料图片)
vue支持服务端渲染(SSR)。
Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。
一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal)，因为应用的大部分代码同时运行在服务端和客户端。
为什么要用服务端渲染 (SSR)？
与客户端的单页应用 (SPA) 相比，SSR 的优势主要在于：
更快的首屏加载：这一点在慢网速或者运行缓慢的设备上尤为重要。服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示，所以你的用户将会更快地看到完整渲染的页面。除此之外，数据获取过程在首次访问时在服务端完成，相比于从客户端获取，可能有更快的数据库连接。这通常可以带来更高的核心 Web 指标评分、更好的用户体验，而对于那些“首屏加载速度与转化率直接相关”的应用来说，这点可能至关重要。【相关推荐：vuejs视频教程、web前端开发】
统一的心智模型：你可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用，而不需要在后端模板系统和前端框架之间来回切换。
更好的 SEO：搜索引擎爬虫可以直接看到完全渲染的页面。
使用 SSR 时还有一些权衡之处需要考量：
开发中的限制。浏览器端特定的代码只能在某些生命周期钩子中使用；一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。
更多的与构建配置和部署相关的要求。服务端渲染的应用需要一个能让 Node.js 服务器运行的环境，不像完全静态的 SPA 那样可以部署在任意的静态文件服务器上。
更高的服务端负载。在 Node.js 中渲染一个完整的应用要比仅仅托管静态文件更加占用 CPU 资源，因此如果你预期有高流量，请为相应的服务器负载做好准备，并采用合理的缓存策略。
服务端渲染 (SSR) vs. 静态站点生成（SSG）
静态站点生成(Static-Site Generation，缩写为 SSG)，也被称为预渲染，是另一种流行的构建快速网站的技术。如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的，那么我们可以只渲染一次，提前在构建过程中完成，而不是每次请求进来都重新渲染页面。预渲染的页面生成后作为静态 HTML 文件被服务器托管。
SSG 保留了和 SSR 应用相同的性能表现：它带来了优秀的首屏加载性能。同时，它比 SSR 应用的花销更小，也更容易部署，因为它输出的是静态 HTML 和资源文件。这里的关键词是静态：SSG 仅可以用于消费静态数据的页面，即数据在构建期间就是已知的，并且在多次部署期间不会改变。每当数据变化时，都需要重新部署。
如果你调研 SSR 只是为了优化为数不多的营销页面的 SEO (例如 /、/about 和 /contact 等)，那么你可能需要 SSG 而不是 SSR。SSG 也非常适合构建基于内容的网站，比如文档站点或者博客。事实上，你现在正在阅读的这个网站就是使用 VitePress 静态生成的，它是一个由 Vue 驱动的静态站点生成器。
Hello World
准备在行动中体验服务端渲染吧。服务端渲染(即SSR)听起来很复杂，不过一个简单的Node脚本只需要3步就可以实现这个功能:
// 步骤 1:创建一个Vue实例var Vue = require("vue")var app = new Vue({ render: function (h) { return h("p", "hello world") }})// 步骤 2: 创建一个渲染器var renderer = require("vue-server-renderer").createRenderer()// 步骤 3: 将 Vue实例 渲染成 HTMLrenderer.renderToString(app, function (error, html) { if (error) throw error console.log(html) // => <p server-rendered="true">hello world</p>})这并不困难。当然这个示例比大部分应用都简单，来探讨这些功能怎样运作
通过Express Web服务器实现简单的服务端渲染
如果没有一个Web服务器，很难说是服务端渲染，所以我们来补充它。我们将构建一个非常简单的服务端渲染应用，只用ES5，也不带其他构建步骤或Vue插件。
启动一个应用告诉用户他们在一个页面上花了多少时间。
new Vue({ template: "<div>你已经在这花了 {{ counter }} 秒。</div>", data: { counter: 0 }, created: function () { var vm = this setInterval(function () { vm.counter += 1 }, 1000) }})为了适应服务端渲染，我们需要进行一些修改，让它可以在浏览器和Node中渲染：
在浏览器中，将我们的应用实例添加到全局上下文（ window）上,我们可以安装它。
在Node中，导出一个工厂函数让我们可以为每个请求创建应用实例。
实现这个需要一点模板：
// assets/app.js(function () { "use strict" var createApp = function () { // --------------------- // 开始常用的应用代码 // --------------------- // 主要的Vue实例必须返回，并且有一个根节点在id "app"上，这样客户端可以加载它。 return new Vue({ template: "<div id="app">你已经在这花了 {{ counter }} 秒。</div>", data: { counter: 0 }, created: function () { var vm = this setInterval(function () { vm.counter += 1 }, 1000) } }) // ------------------- // 结束常用的应用代码 // ------------------- } if (typeof module !== "undefined" && module.exports) { module.exports = createApp } else { this.app = createApp() }}).call(this)现在有了应用代码，接着加一个 html文件。
<!-- index.html --><!DOCTYPE html><html><head> <title>My Vue App</title> <script src="/assets/vue.js"></script></head><body> <div id="app"></div> <script src="/assets/app.js"></script> <script>app.$mount("#app")</script></body></html>主要引用assets文件夹中我们先前创建的app.js，以及vue.js文件，我们就有了一个可以运行的单页面应用
然后为了实现服务端渲染，在服务端需要加一个步骤。
// server.js"use strict"var fs = require("fs")var path = require("path")// 定义全局的Vue为了服务端的app.jsglobal.Vue = require("vue")// 获取HTML布局var layout = fs.readFileSync("./index.html", "utf8")// 创建一个渲染器var renderer = require("vue-server-renderer").createRenderer()// 创建一个Express服务器var express = require("express")var server = express()// 部署静态文件夹为 "assets"文件夹server.use("/assets", express.static( path.resolve(__dirname, "assets")))// 处理所有的Get请求server.get("*", function (request, response) { // 渲染我们的Vue应用为一个字符串 renderer.renderToString( // 创建一个应用实例 require("./assets/app")(), // 处理渲染结果 function (error, html) { // 如果渲染时发生了错误 if (error) { // 打印错误到控制台 console.error(error) // 告诉客户端错误 return response .status(500) .send("Server Error") } // 发送布局和HTML文件 response.send(layout.replace("<div id="app"></div>", html)) } )})// 监听5000端口server.listen(5000, function (error) { if (error) throw error console.log("Server is running at localhost:5000")})这样就完成了。整个示例，克隆下来深度实验。一旦它在本地运行时，你可以通过在页面右击选择页面资源（或类似操作）确认服务选渲染真的运行了。可以在body中看到：
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
代替:
<div id="app"></div>
流式响应
Vue还支持流式渲染，优先选择适用于支持流的Web服务器。允许HTML一边生成一般写入相应流，而不是在最后一次全部写入。其结果是请求服务速度更快，没有缺点！
为了使上一节应用代码适用流式渲染，可以简单的替换 server.get("*",...)为下面的代码：
// 拆分布局成两段HTMLvar layoutSections = layout.split("<div id="app"></div>")var preAppHTML = layoutSections[0]var postAppHTML = layoutSections[1]// 处理所有的Get请求server.get("*", function (request, response) { // 渲染我们的Vue实例作为流 var stream = renderer.renderToStream(require("./assets/app")()) // 将预先的HTML写入响应 response.write(preAppHTML) // 每当新的块被渲染 stream.on("data", function (chunk) { // 将块写入响应 response.write(chunk) }) // 当所有的块被渲染完成 stream.on("end", function () { // 将post-app HTML写入响应 response.end(postAppHTML) }) // 当渲染时发生错误 stream.on("error", function (error) { // 打印错误到控制台 console.error(error) // 告诉客服端发生了错误 return response .status(500) .send("Server Error") })})这不比之前的版本复杂，甚至这对你来说都不是个新概念。我们做了：
建立流
在应用响应前写入HTML
在可获得时将应用HTML写入响应
在响应最后写入HTML
处理任何错误
组件缓存
Vue的服务端渲染默认非常快，但是你可以通过缓存渲染好的组件进一步提高性能。这被认为是一种先进的功能，但是，如果缓存了错误的组件（或者正确的组件带有错误的内容）将导致应用渲染出错。特别注意：
不应该缓存组件包含子组件依赖全局状态（例如来自vuex的状态）。如果这么做，子组件（事实上是整个子树）也会被缓存。所以要特别注意带有slots片段或者子组件的情况。
设置
在警告情况之外的，我们可以用下面的方法缓存组件。
首先，你需要提供给渲染器一个 缓存对象。这有个简单的示例使用 lru-cache
var createRenderer = require("vue-server-renderer").createRenderervar lru = require("lru-cache")var renderer = createRenderer({ cache: lru(1000)})这将缓存高达1000个独立的渲染。对于更进一步缓存到内容中的配置，看lru-cache设置
然后对于你想缓存的组件，你可以为他们提供：
一个唯一的名字
一个 serverCacheKey函数，返回一个唯一的组件作用域
例如:
Vue.component({ name: "list-item", template: "<li>{{ item.name }}</li>", props: ["item"], serverCacheKey: function (props) { return props.item.type + "::" + props.item.id }})缓存的理想组件
任何纯组件可以被安全缓存 - 这是保证给任何组件传递一样的数据产生相同的HTML。这些场景的例子包括：
静态的组件 (例如 总是尝试一样的HTML,所以 serverCacheKey 函数可以被返回 true)
列表组件（当有大量列表，缓存他们可以改善性能）
通用UI组件 (例如 buttons, alerts, 等等 - 至少他们通过props获取数据而不是 slots或者子组件)
说明：
现在，应该理解服务端渲染背后的基本概念了。但是，构建过程、路由、Vuex每一个都有自己的注意事项。
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是vue3.0支持服务端渲染吗的详细内容，更多请关注php中文网其它相关文章！
