Nuxt 中的数据 VS 异步数据

Question

我正在使用 vue.js 和 nuxt.js，但我仍然对何时使用 Data VS Async Data 感到困惑。当我只有在页面上显示的数据时，为什么我需要使用异步数据？

我有一个常见问题解答的数据对象，只想显示数据而不用它做任何事情。使用 asyncData 有什么好处？或者它们的案例或最佳用途是什么？

如果在我的组件内部使用这样的数据，我应该默认将这样的列表数据显示为异步吗？

数据

 data:() => ({
   faqs:[
     {"title":"faq1"},
     {"title":"faq2"},
     {"title":"faq3"},
    ]
 }),

异步数据

asyncData(context) {
        return new Promise((resolve, reject) => {
            resolve({
                colocationFaqs:[
                    {"title":"faq1"},
                    {"title":"faq2"},
                    {"title":"faq3"},
                ]
            });
        })
        .then(data => {
            return data
        })
        .catch(e => {
            context.error(e);
        });
    },

Answer 1

asyncData 发生在服务器端。例如，您无法访问诸如 localStorage 或 fetch() 之类的浏览器内容，但另一方面您可以访问服务器端内容。

那么为什么要使用 asyncData 而不是像 created 这样的 vue 循环呢？

使用asyncData 的好处是搜索引擎优化和速度。有这个特殊的context 参数。它包含诸如store 和context.store 之类的内容。它很特别，因为asyncData 发生在服务器端，但商店通常在客户端。这意味着您可以获取一些数据，然后用它填充您的商店并在其他地方显示它。这样做的好处是它都是服务器端的，并且会增加您的 SEO，因此例如 google 爬虫不会看到空白页

为什么要在显示时预渲染它 反正

是的，对我们来说，如果我向客户端发送 1 个文件并渲染所有数据（如 SPA 中的数据或预渲染），这无关紧要。但这对于谷歌爬虫来说并不重要。如果您使用 SPA 模式，爬虫只会看到一个空白页面。你也可以发现它。转到任何 SPA 网站并单击右键单击并检查，您会看到只有 1 个 Div 标签和几个 <script> 标签。 （不要按 F12 并像这样检查，这不是我的意思）。