Alright I have a home page where I am fetching profiles and displaying them. I have an about page as well. Whenever I change the route and come back to the "home" route request is made to the db to get the profile. I believe that's not a good thing.
it should have some sort of caching
Here is how I am making api request

"use client"
const InfiniteScrollComponent = ({ userProfile }: any) => {
  const supabase = createClient();

  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(2);

  useEffect(() => {
    if (userProfile) {
      fetchData();
    }
  }, []);

  const fetchData = async () => {
    try {
      if (userProfile) {
        const { data: newData, error: someError } = await supabase
          .rpc("get_profiles_near_user_new", {
            user_location: `SRID=4326;POINT(${userProfile[0].location.coordinates[0]} ${userProfile[0].location.coordinates[1]})`,
            max_distance: 100000,
          })
          .range(page * perPage - perPage, page * perPage - 1);

        if (someError) throw someError;

        if (newData.length < perPage) {
          setHasMore(false); // No more data available
        }
        // @ts-ignore
        setData([...data, ...newData]); // Append new data to existing data
        setPage(page + 1);
      }
    } catch (error) {
      // @ts-ignore
      console.error("Error fetching data:", error.message);
    }
 }
return (
// infinite scroll comp here
)

what can i do?