如何正确使用 Nuxt 2.12 中新的 fetch() 钩子进行 SSR？

Question

我将 Nuxt 更新到最新版本，因为他们引入了新的fetch()钩子。在我的项目中，我从 Prismic 检索数据。之前，我使用的是asyncData()，但是在导航时，需要一些时间才能渲染页面asyncData()（这就是它的工作原理）。

理想的解决方案是在该特定页面上导航，并在检索数据时显示加载动画。新的fetch()钩子看起来很合适，因为它暴露了$fetchState.pending以便检查操作的状态。

现在，代码（我正在从商店的类别中检索子类别）：

        data(){
            return{
                docs: []
            }
        },

        async fetch() {
            try{
                const res = await this.$prismic.api.query(this.$prismic.predicates.at('my.category.uid', this.$route.params.sub))
                const el = res.results[0]
                const query = await this.$prismic.api.query([this.$prismic.predicates.at('document.type','sub-category'), this.$prismic.predicates.at('my.sub-category.category', el.id)], { orderings: '[my.sub-category.position, my.sub-category.title]' })
                this.docs = query.results
            }   
            catch (e) {
                console.log(e)
            }
        }

这至少在客户端有效。这对于正确的 SSR 有效吗？我的意思是，在asyncData()（在服务器端调用）中，this是不可访问的，data(). asyncData()如果这是正确的解决方案，那么再使用又有什么用fetch()呢？

Answer 1

就SSR而言，fetch使用方式相同asyncData（尽管页面转换时序有所不同）。

fetch和之间的区别asyncData：

• asyncData无法访问this，而fetch（在 Nuxt >= 2.12 中）可以。
• asyncData的返回值设置了组件的数据，而fetch的返回值则没有设置，因为fetch已经可以访问this，所以可以data直接设置 props。
• fetch由两个选项（fetchOnServer和）控制fetchDelay，而asyncData没有选项。当fetchOnServer（true默认情况下）设置为 时false，fetch仅在客户端调用该钩子。
• fetch与对象耦合$fetchState，提供pendingand timestamp（与获取操作的当前状态相关）；和error函数（允许您显示错误消息）。请注意，在其参数中asyncData还提供了该函数。errorcontext
• fetch允许更快的页面转换（根据RFC 27）。
• asyncData仅对页面可用，但fetch可以被任何组件（包括页面）使用。

除了上述差异之外，这两种方法的语义是相同的。

它似乎fetch是非正式的继承者asyncData，尽管两者同时存在而没有弃用通知。由于fetch提供了更多功能并解决了 的问题asyncData，我建议fetch专门使用。