Nuxt page render loop on back navigation

Question

I have an issue with two pages. Page 1, is a list, and page 2 detail an item in the list with a back button. Page 1 loads fine when first accessed, however after clicking the back button or navigating back there are thousands of canceled requests in the network tab, and asyncData is called thousands of times until finally there is a memory leak and the server crashes. If I try to navigate from page 2 to page 3 everything works great, if I click the back button to page 2 it works fine.

Page 1

<template>
    <v-container fluid>
        <div>
            <div v-if="appointment" div class="text-center">
                <span class="text-h5">
                    {{ appointment.Representative | upper }}
                </span>
            </div>

            <div v-if="announcements && announcements.length">
                <v-card
                    v-for="announcement in announcements"
                    v-show="announcement.status == 'visible'"
                    :key="announcement._id"
                >
                    <v-card-title>
                        {{ announcement.message }}
                    </v-card-title>
                </v-card>
            </div>
            <v-divider v-else class="mx-5 mt-1" />

            <div>
                <v-row v-for="evt in evts" :key="evt.EvntId" align="center">
                    <v-col>
                        <span> {{ evt | evtTitle }} </span>
                    </v-col>

                    <v-col cols="2" align="end" class="mx-2">
                        <v-btn
                            color="primary"
                            text
                            :disabled="evt.Status.toLowerCase() === 'pending'"
                            nuxt
                            :to="`/event/${evt.EvntId}`"
                        >
                            Open
                        </v-btn>
                    </v-col>
                </v-row>
            </div>
        </div>
    </v-container>
</template>
<script>
export default {
    async asyncData({ params, $api, $misc }) {
        let appointment = null;
        let events = null;

        const req1 = await $api
            .get(`/public/club/${params.id}/shoot/`)
            .catch((err) => {
                console.error(err);
            });

        appointment = req1.data.find(
            // eslint-disable-next-line eqeqeq
            (x) => x.ShootId == params.shootId
        );

        const evs = await $api
            .get(`/public/club/${params.id}/shoot/${params.aptId}/evnt/`)
            .catch((err) => {
                console.error(err);
            });
        events = evs.data;

        const notableEvents = events.filter(
            (x) => x.Status.toLowerCase() === 'active'
        );

        for (let i = 0; i < notableEvents.length; i++) {
            const event = notableEvents[i];
            const x = await $api
                .get(
                    `/public/club/${params.id}/appointment/${params.aptId}/details/evnt/${event.EvntId}`
                )
                .catch((err) => {
                    console.error(err);
                });

            event.Scores = x.data;
            event.allScores = x.data.length;
        }

        return {
            shoot,
            events,
        };
    },
    data() {
        return {
            appointment: null,
            events: [],
            announcements: [],
        };
    },
};
</script>

Page 2

<template>
    <v-container>
        <v-btn @click="goBack"> Back </v-btn>
    </v-container>
</template>
<script>
export default {
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

Globally I have tried

Disabling prefetch in nuxt.config.js

// disable prefetch
router:{
  prefetchLinks: false
},

Disabling keep-alive on the nuxt view

<nuxt keep-alive :keep-alive-props="{ max: 10 }" />
<!-- to -->
<nuxt />

In page 1 I have tried disabling prefetch on the links, and on the global level. By replacing v-btn with nuxt-link

<nuxt-link no-prefetch :to="`/event/${evt.EvntId}`">
    Open
</nuxt-link>

I have also tried using fetch instead of async data, but it produces the same result.

In page2 I have tried using a full link to the previous page instead with and without no-prefetch with the link being generated in the to prop, as a computed property, and setting it in data on mounted.

<nuxt-link no-prefetch :to="`/appointment/${$route.params.appointmentId}/events`">
    Open
</nuxt-link>

I am at an absolute loss as to what could be causing this on this pair of pages, only when using the back button or navigating away.

Edit

I have also tried moving the for loop of subsequent requests out of asyncData and moved it to fetch the issue still persits.

I have also swapped asyncData with fetch

I also took all of my promises and turned them into an array and awaited them.

What is the endpoint being called several times? Also, did you tried to `console.log` and see if each request does it job? A simple solution would be to convert it into a `fetch()` hook and see if you still have the issue. No mixin or alike anywhere? — kissu, Feb 14 '22 at 17:07
All of the endpoints are get called except the request from the loop. Looking at the server the requests are being responded to with status `200`. `fetch()` was leading to other complications with the `notableEvents` loop, sometimes not loading data. I would be happy to go back to that method. No mixins, but there are filters. — Marcello B., Feb 14 '22 at 17:16
You should probably use map and async/await combo because I guess that `notableEvents.length` is undefined or falsy under some conditions. Check this answer to see how to rewrite it: https://stackoverflow.com/a/40140562/8816585 (you can of course skip the TS part) — kissu, Feb 14 '22 at 19:25
I tried replacing asyncData with fetch, no luck. I also converted my requests into an array with `await promise.all` and the issue still persists. — Marcello B., Feb 16 '22 at 02:46

Nuxt page render loop on back navigation

0 Answers0