服务端渲染

服务端渲染（SSR）是一种应用程序功能，通过在服务器而非浏览器上渲染网页来显示内容。服务端将完全渲染的页面发送给客户端，客户端的 JavaScript 包接管并允许 Vue.js 应用进行水合 。

需要 Node.js 服务器环境

渲染网页需要 JavaScript 环境。

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

扩展和控制服务器

可以使用 serverMiddleware 扩展服务器，使用 middleware 控制路由。

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

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

}

服务器环境与浏览器环境

由于处于 Node.js 环境中，可以访问 req 和 res 等 Node.js 对象，但无法访问 window 或 document 等属于浏览器环境的对象。不过，使用 beforeMount 或 mounted 等钩子可以使用 window 和 document。

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

Nuxt 中的服务端渲染步骤

步骤 1：浏览器到服务器

浏览器发送第一个请求时，会到达 Node.js 内部服务器。Nuxt 生成 HTML 并将其与执行 asyncData、nuxtServerInit、fetch 等函数的结果一起发送回浏览器，钩子函数也会同样执行。

步骤 2：服务器到浏览器

浏览器接收到服务器生成的 HTML 以及渲染的页面，内容显示出来，Vue.js 水合开始生效。此过程之后，页面变为可交互状态。

步骤 3：浏览器到浏览器

通过 <NuxtLink> 在页面间导航是在客户端完成的，因此除非硬刷新浏览器，否则不会向服务器发送请求。

注意事项

window 或 document 未定义

这是由服务端渲染引起的。如果需要指定仅在客户端导入资源，需要使用 process.client 变量。

例如，在 .vue 文件中：

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

iOS 和电话号码

某些版本的移动端 Safari 会自动将电话号码转换为链接，这会导致 SSR 内容与网站内容不匹配，从而引发 NodeMismatch 警告，可能导致应用在这些 Safari 版本中无法使用。

如果 Nuxt 页面中包含电话号码，有两个选项：

使用 meta 标签停止转换

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

将电话号码包装在链接中

<!-- 电话号码示例：+7 (982) 536-50-77 -->

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