Nuxt：了解下服务端渲染的基本应用

服务器端渲染 (SSR) 是应用程序通过在服务器上显示网页而不是在浏览器中渲染网页来做出贡献的能力。服务器端将完整渲染的页面发送给客户端；客户端的 JavaScript 包接管，然后允许 Vue.js 应用程序进行合并。

需要 Node.js 服务器

渲染网页需要 JavaScript 环境。

需要配置 Node.js 服务器来执行您的 Vue.js 应用程序。

扩展和控制服务器

您可以使用 serverMiddleware 扩展服务器并使用中间件控制路由。

export default function (req, res, next) {
  console.log(req.url)
  next()
}

export default {
  serverMiddleware: ['~/server-middleware/logger']
}

服务器与浏览器环境

因为您处于 Node.js 环境中，所以您可以访问 Node.js 对象，例如req和res。您无权访问window或document对象，因为它们属于浏览器环境。但是，您可以使用windowordocument通过使用beforeMountormounted挂钩。

beforeMount () {
  window.alert('hello');
}
mounted () {
  window.alert('hello');
}

使用 Nuxt 的服务器端渲染步骤

第 1 步：浏览器到服务器

当浏览器发送初始请求时，它将访问 Node.js 内部服务器。Nuxt 将生成 HTML 并将其与执行函数的结果一起发送回浏览器，例如asyncData、nuxtServerInit或fetch。钩子函数也会被执行。

第 2 步：服务器到浏览器

浏览器从服务器接收渲染的页面以及生成的 HTML。内容被显示，Vue.js 水合作用开始，使其具有反应性。经过这个过程后，页面就可以交互了。

第 3 步：浏览器到浏览器

页面之间的导航<NuxtLink> 是在客户端完成的，因此除非您硬刷新浏览器，否则您不会再次访问服务器。

注意事项

窗口或文档未定义

这是由于服务器端渲染造成的。如果需要指定只在客户端导入资源，则需要使用该process.client变量。

例如，在您的.vue文件中：

if (process.client) {
  require('external_library')
}

iOS 和电话号码

某些移动 Safari 版本会自动将电话号码转换为链接。这将触发NodeMismatch警告，因为 SSR 内容不再与网站内容匹配。这可能会使您的应用程序在这些 Safari 版本上无法使用。

如果您在 Nuxt 页面中包含电话号码，您有两个选择。

使用元标记来停止转换

<meta name="format-detection" content="telephone=no" />

将您的电话号码包含在链接中

<!-- Example phone number: +7 (982) 536-50-77 -->
<template>
  <a href="tel: +7 (982) 536-50-77">+7 (982) 536-50-77</a>
</template>