My requirements:
- Fetch data from DB in server component
- Show that data via markers on a map in child client component
- The data fetching should include filters in the DB query depending on the map bounds. So on panning or zooming, I would like to refetch the data and filter so that only the ones that are visible in the map are fetched.
How would I achieve that?
So far:
- I fetch everything at once in a client component, keep it in state
- I have an idle-listener on my google map. On changing the viewport I use the bounds.contains() function from google map to filter the local state to only render the markers visible in the current map viewport.
This doesn’t scale though especially once I have hundreds or thousands of data points.
Other relevant information
- My data points have a lat and lng fields in the database
- I use prisma and postgres