Vue/Nuxt：试图了解SSR

Question

多年来，我一直将 Vue 作为客户端库使用，但不幸的是，我从未涉足服务器端渲染，也没有深入了解它。我正在看一些关于它的教程，其中给出了使用 mount() 挂钩进行正常客户端抓取的示例。

<template>
    <div v-for="item in items">
         <div> {{ item.name }} </div>
     </div>
</template>
data() {
   return {
     items: []
   }
}

mount() {
   fetch('http://www.myendpoint.com')
   .then(response => {
     this.items = response;
   }
}

与使用 Nuxt 的 asyncData 选项相比：

<template>
    <div v-for="item in items">
         <div> {{ item.name }} </div>
     </div>
</template>

asyncData() {
   fetch('http://www.myendpoint.com')
   .then(response => {
     this.items = response;
   }
}

这是否仅仅意味着 async data would run long before mountwould ever run since it's run before the component is even loaded so the data will be ready? What happens if that fetch call takes a while to load then...doesn't the same side effect happen? Rather than a component without data ready usingmount()` 如果提取时间很长，如果使用 SSR，在提取完成之前你什么都不会加载？

Answer 1

Nuxt 基本上是一个 Vue 应用程序，但在服务 SPA 之前完成了一些服务器逻辑。

以下是在 Nuxt 中使用一些数据获取钩子的 2 种方法：

fetch()（这是实际的钩子名称，与 fetch API 无关），我推荐使用这个
asyncData（几乎相同但不太灵活，尽管可以阻止页面呈现，直到正确获取所有数据）

可以在此处找到更多信息：https://nuxtjs.org/docs/2.x/features/data-fetching

这里也有完整的问题：

最后，您可能看到了 Vue 的生命周期：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
这是 Nuxt 的一个，它为 Vue 的 SPA 增加了更多层：https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

Vue/Nuxt：试图了解SSR

Vue/Nuxt: trying to understand SSR

vue.js

server-side-rendering

nuxt.js