CODEWITHSUNDEEP
next.jsnext.js13server-action
Rishabh
Rishabh

Reputation: 177

View not updating in page.tsx in Nextjs

I am trying to show products on the basis on search query, which is working correctly

route

http://localhost:3000/search?q=cat

Its result is reflected in below page

import ProductListForSearchWithInfiniteScroll from '../../components/product-list/ProductListForSearchWithInfiniteScroll';
import { ServerActionFetchProductsForSearch } from '@/server-actions/ServerActionFetchProductsForSearch';
const SearchPage = async ({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) => {
  const search =
    typeof searchParams.q === 'string' ? searchParams.q : undefined;
  
  let products = await ServerActionFetchProductsForSearch({ search: search });
  
  return (
    <ProductListForSearchWithInfiniteScroll
      noProductsFound={productsNotFound}
      initialProducts={products}
      search={productsNotFound ? '' : search}
      searchAsText={search??''}
    />
  );
};

export default SearchPage;

Issue

  1. When I goto search route via search bar it is correctly working
  2. when I again goto search route via search bar from the search route itself, the view does not change. i.e. searching different keyword again from search route itself
  3. I have checked, and system is fetching new products on every visit, but I am not able to see the updated products list for new queries.

I have tried reset cache from search bar also, but the view is not updating. searchbar submit button(inside navbar.tsx)

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setModal(false);
    ServerActionClearCache(`/search?q=${searchQuery}`);    //This has no impact on view
    router.push(`/search?q=${searchQuery}`);
  };

Note: When I visit the search route from any other page, correct list is being show, but not when I do multiple searches in sequence.

Upvotes: 0

Views: 35

Answers (0)

Related Questions