Next.js Discord

Discord Forum

Nextjs 13 Back button browser resulting infinite loop (fetching)

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
Hi Folks

I want to ask you i had problem with nextjs 13.4 app directory, here is the scenario
1. whenever i going to certain pages and comeback using back button in the browser, it resulting infinity loop, but if i click other button like home button (the cat logo in the video) it wont resulting infinity loop, only the builtin back and forward button in the browser causing this
2. i heard that this is happening because of the link components, but i have a lot of link components and this only happening on one page (article: https://stackoverflow.com/questions/76402871/tab-freezes-when-using-browser-forward-button-for-page-accessed-via-link) but i can't remove async because i use tanstack query and it need async await.

here i attach video for the scenario

12 Replies

aardani
did you do any redirect / router.push on home page?
Giant pandaOP
Yes, i do that, for my search feature and tag search feature.
@Giant panda Yes, i do that, for my search feature and tag search feature.
aardani
maybe thats what causing you to have redirects
maybe make sure that its not directing when the search bar is empty or when the tag is not yet clicked
i.e don't redirect on mount []
Giant pandaOP
Do you have any references for that? I'am very new on this one
@Giant panda Do you have any references for that? I'am very new on this one
aardani
No perhaps show where you implement your router.redirect
function
```ts
paste code here
```
Giant pandaOP
@aardani ok i have 2 things, search using tag button and free text search

1. tag button

export const TagsButton = () => {
    const [searchQuery, setSearchQuery] = useState([]);
    useEffect(() => {
        async function getData(){
            const data = await fetchTagsData();
            setSearchQuery(data);
        }
        getData()
    }, [])
    const router = useRouter();
    const handleClick = (tag : string) => {
        router.push(`/tags?q=${tag}`);
    };
    return (
        <Button
            onClick={() => handleClick(data[0].attributes.tags.name_tag)}
            variant="ghost"
        >
            {data[0].attributes.tags.name_tag}
        </Button>
    )
}


export default TagsButton
2. search button 

"use client";

import React, { useState } from 'react'
import { Input } from './ui/input'
import { useRouter } from 'next/navigation';

export const Search = () => {
    const [searchQuery, setSearchQuery] = useState("");
    const router = useRouter();
    const onSearch = (event: React.FormEvent) => {
        event.preventDefault();
        const encodedSearchQuery = encodeURI(searchQuery);
        router.push(`/search?q=${encodedSearchQuery}`);
        setSearchQuery(''); // Reset searchQuery to an empty string
    }
    return (
        <form onSubmit={onSearch}>
            <div className="">
                <Input
                    type="text"
                    placeholder="Search"
                    value={searchQuery}
                    onChange={(event) => setSearchQuery(event.target.value)}
                >
                </Input>
            </div>
        </form>
    )
}

export default Search
Giant pandaOP
Hi @aardani any idea?