I’ve launched a Next.js site on Vercel hosting. I’ve implemented Apollo GraphQL client on the React frontend and Apollo Server as as an API route using apollo-server-integration-next. The resolvers talk to a MongoDB Atlas backend. The site seems to be working well but it’s making a LOT of network requests which is generating a lot of cost in terms of data transfer.
I’m looking for ways to try and cut down the network requests. I’m only using GraphQL queries (no mutations) and the content only changes at set times 3 times per day (very predictable). The rest of the time the content is static. The database only contains ~1000 records which are all returned by default at the start (paginated) and the user can then filter and sort these results via form controls. So the actual documents remain the same but are just filtered or re-ordered accordingly.
I have control of both the server and the client but I’ve not implemented any specific caching other than that which Apollo may provide out of the box with InMemoryCache. The server is currently also running as a serverless function on Vercel but if a server-side cache is the best solution then I can look to break this out onto a VM or long-running container if that would improve things.
Can anyone suggest the best approach to caching the data on the server or client which can reduce the number of network requests being sent and data transferred?
Thanks.