Fetch vs server action vs server component

Help
1

Hi,

Background: I am trying to have a website where when a user clicks on a “sport” component, a call is made to a database, and based on this information n different components appear with the teams. Then if the user clicks on any of these team components, another call to the database is made and the players appear. The information is stored in a database. I am using prisma + postgres.

Question:
I know that I will need to use client components in order to use the state hook.
Should I:
a) Use fetch() with route.ts to expose api endpoints in order to obtain the information.
b) Use a server action to access the database by calling it from a client component?
c) Pass a server component as a prop and then use that to access the database.

Thank you!

A new Vercel/Next user.

2

Hi @adamabramowitz0! As with most things in tech, preferences and dependencies play a part in determining the “right” solution.

I hope others will share their ideas and experiences here, but I want to share some documentation that can help you decide what makes sense for your project.

3

The best way for end performance will always be passing a server component as the fetch will occur on the server near by your DB likely within the same datacenter minimizing the response time, but if the Dev experience is most important then a server action is likely the best way to go as it’s much easier to work with compared to passing around server components as props.

4

Makes sense! Thank you!