I'm relatively new to the nextjs scene and have just started my first personal project (an online appointment booking site). I have created a MongoDB Atlas database and successfully initiated a connection through a seperate file (e.g. mongodb.js) in my ./libs folder. However, I am struggling to understand the best method of querying and updating the database from my front end components. I understand that there are a number options...

1). Create an API Route Handler to return all collections in the database then create a function to extract the required data inside the front end component (could store the whole DB inside useState?). However, I'm unsure about my endpoint being made public.

2). Use Server Actions as I can create specific fetch requests dependant on the data required for both GET and POST however, I understand that server-actions are semantically POST requests (I require a combination of both POST & GET).

3). Use Server Components (unsure how my react-calendar component would work with that method?).

3). Hit the MongoDB Atlas URI using 'fetch' direct from the client component where it's required.

I cannot seem to get a definitive answer as to which is the approved protocol for my requirements. Any help would be amazing guys!