Nextjs 13 Back button browser resulting infinite loop (fetching)

[blazing plank]

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

[regal bronze]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[stable flume]

did you do any redirect / router.push on home page?

[blazing plank]

Yes, i do that, for my search feature and tag search feature.

[stable flume]

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 []

[blazing plank]

Do you have any references for that? I'am very new on this one

[stable flume]

No perhaps show where you implement your router.redirect

function

```ts
paste code here
```

[blazing plank]

@stable flume 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