I am currently developing a search application using NextJs 13, and I have encountered an issue where the page refreshes every time I click the search button. Strangely, this only happens when the application is deployed on Vercel. When running the app locally with "npm run build" and "npm start dev", everything works as expected with no page refreshing. I have tried using "shallow true" and even "e.preventDefault", but the behavior persists. The problem is that upon page refresh, I lose input state and continually receive a "no results found" message. I am utilizing the SWR hook for data fetching, and it's important to note that I am not using a form in this scenario.
Result Page
const {
data: cases,
error,
isLoading,
} = useSWR(
startFetch
? `https://<url>/search/${isSearchQueryParams}`
: null,
fetcher,
{
keepPreviousData: true,
}
);
Hero Component / Index Page
<div onClick={handleClick}>
<ButtonBlueWhite height={47} width={200} title={"Search"} />
</div>
const handleClick = () => {
setStartFetch(true);
router.push("/results");
};