nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.74k stars 5.01k forks source link

useAsyncData changed behaviour #13460

Closed djschilling closed 2 years ago

djschilling commented 2 years ago

Environment

Nuxt CLI v3.0.0-27444404.919db5b 16:17:26 RootDir: /Users/david/projects/finder/churchtools-finder 16:17:28 Nuxt project info: 16:17:28


Reproduction

I have a file test.vue in the pages folder. It looks like this:

<template>
    <div>
            {{ data }}
    </div>
</template>
<script lang="ts" setup>
import { useAsyncData } from '#app';

const { data, error, pending } = await useAsyncData('profile', async () => {
    if (process.server) {
        console.log('server1');
        return 'server1';
    } else {
        console.log('client1');
        return 'client1';
    }
});
</script>

When calling http://localhost:3000/test in the browser i see the following:

Nuxt Version v3.0.0-27444404.919db5b

Nuxt Version 3.0.0-27379487.e0cf2d7

Describe the bug

As described in the reproduction, the new version of nuxt3 changed the behaviour of useAsyncData.

In Version 3.0.0-27379487.e0cf2d7 useAsyncData was only called server side if the page was directly opened in the browser. Only when navigating from another nuxt subpage with the NuxtLink useAsyncData was called in the browser and not in the server.

This behaviour is sensible to me. However in Version v3.0.0-27444404.919db5b of nuxt this changed. Not on a direct page load first useAsyncData is called and after that it is called on the client as well.

Additional context

What i do in the function useAsyncData is to load data either directly from the database if the code is executed on the server and to load the api from an api if the code is executed in the browser. And i don't want the code to be executed two times.

danielroe commented 2 years ago

I think this is likely a duplicate of https://github.com/nuxt/nuxt.js/issues/13369. (If not, please provide a reproduction and I'll reopen.)