NUXT中useFetch获取的total变量SSR与客户端值不一致问题

async function getPosts () {
        let total = ref(null);
        const { data: articles, refresh } = await useFetch(url, {
            method: 'GET',
            server: true,
            query: {
                per_page: perPage.value,
                page: page.value,
            },
            onResponse(context) {
                total.value = Number(context.response.headers.get('X-WP-Total'))
            },
            onResponseError({ request, response, options }) {
                console.log('Ошибка запроса'+ request)
            }
        });
    console.log(total.value);
}

调用上述getPosts函数时，控制台输出显示：SSR环境下total变量能获取正确值，但客户端环境下total仍为null，请问该问题的原因是什么？

原因解析 #

问题核心在于useFetch配置中的server: true参数：

• 该参数会强制请求仅在服务端执行，客户端不会发起任何请求
• SSR阶段服务端请求接口后，会触发onResponse回调并给total赋值；但客户端不会重复执行请求，也就不会触发回调，total始终保持初始的null值
• 解决方向：
  1. 移除server: true配置，让请求在服务端和客户端都执行
  2. 在服务端将total的值同步到客户端状态（比如通过Nuxt的状态管理或Pinia），避免客户端重复请求

内容的提问来源于stack exchange，提问作者Romy