Nuxt3：探索useFetch是如何做到避免客户端重复请求

在之前的文章《Nuxt3：useFetch在服务端及客户端重复请求问题》中提到了useFetch在服务端及客户端重复请求问题，文中提到Nuxt在服务端获取数据后，会将数据附加到Nuxt payload（也就是nuxtApp.payload），它和文中提到的__NUXT_DATA__之间应该是有关联的，具体是如何关联上的，本文将展开来讲。

Nuxt payload与 __NUXT_DATA__

在这里不直接讲结论，而是先讲一下获取结论的过程，这可能是部分伙伴看完结论更感兴趣的事情，我觉得这个更有价值。

之前文章提到数据存在于<script type="application/json" id="__NUXT_DATA__" data-ssr="true">节点之中：

首先想到的是去官网查找一下是否有__NUXT_DATA__的相关介绍（可惜没有发现）

接着是去github的issues看一下：

发现了几个与__NUXT_DATA__匹配的问题，但仔细阅读后并没有提供有效的信息。

那么就直接到代码里看看，根据节点的特征，最直接的想法就是全文搜索__NUXT_DATA__：

搜索之后发现只出现在自身节点，除此之外没有其它代码出现。

接着回到UseFetch文档:

It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.

文档中提到，数据会附加在Nuxt payload 上，直接搜索payload：

可以发现结果集中所在的文件不多，而且可以看到比较“有感觉”的js出现，接着我们再nextwork面板中去找一下这个文件nuxt/dist/app/plugins/revive-payload.client.js?v=75febee6，并在源码面板查看它的内容：

文件源码出现了nuxtApp.payload和getNuxtClientPayload，这个很可能就是我们想找的对象。为了验证猜想，我们打个断点调试一下：

至此我们终于发现了__NUXT_DATA__，它出现在动态加载的js文件payload.js中，所以在搜索源码的时候并没有搜索到它。

答疑

1.nuxt3中的__NUXT_DATA__可以去除吗？

Nuxt在服务端使用useFetch获取数据后，会将数据附加到Nuxt payload，它最终是关联到__NUXT_DATA__，因此在此场景下是不能去除的。

关于这个问题的相关讨论，可以关注《https://github.com/nuxt/nuxt/discussions/26754》（目前该问题还没有任何回应）。

如果不使用useFetch，改用$fetch，也依然会生成__NUXT_DATA__。

而在nuxt.config.ts中设置experimental: {renderJsonPayloads: false},虽然__NUXT_DATA__的标签没了，但数据会保留在window.__NUXT__中。

一般用Nuxt，都是为了SEO，否则在nuxt.config.ts配置文件中设置ssr:false，则__NUXT_DATA__中就不会出现接口数据了：

如果想要SSR，又真想去除__NUXT_DATA__，那么可以参考文章《Nuxt3: 强制删除__NUXT_DATA__的一种方式》

2.nuxt3中的__NUXT_DATA__可以加密吗？

如果你想对__NUXT_DATA__进行加密，其实是没有必要的，具体可以参考github上的这个issues：《https://github.com/nuxt/nuxt/issues/24475》