Next.js Discord

Discord Forum

Server Actions vs API Routes

Unanswered
German yellowjacket posted this in #help-forum
Open in Discord
German yellowjacketOP
would like some input on how to handle this situation: I am essentially making a bucket list application
On my search results I have a bunch of "Place" components which have a button that allows you to add it to your bucket list. Should I connect the button to my database (mongodb) using the actions way which requires me to create forms for every single button. Or should I just pass the information as an API route call. Or is there a different way? Please let me know thanks.

Here is how the search results looks like
{/* Search Results */}
        <ScrollArea className="w-full p-4 flex flex-col space-y-4 max-h-[calc(100vh-8rem)]">
          {places.length === 0 ?
            (<p className="text-gray-400 text-center">No results found</p>) :
            (places.map((place, index) => (
              <Card key={index}>
                <CardHeader>
                  <CardTitle>{place.displayName}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>{place.formattedAddress}</CardDescription>
                </CardContent>
                <CardFooter>
                  <Button
                    onClick={() => addBucketItem(place)}
                    className="mt-3 w-full px-4 py-2"
                  >
                    Add to List
                  </Button>
                </CardFooter>
              </Card>
            ))
            )}
        </ScrollArea>

5 Replies

Brown bear
Using a server action doesn't mean you have to create forms 

'use server'
async function addBucketItem(place) {
    await db.insert(place);
}

<Button onClick={() => addBucketItem(place)} />
@German yellowjacket Ok so I should use the server actions then?
Brown bear
You can use both, it depends on the rest of your infrastructure. I'd say that if the addBucketItem doesnt have to be called by external APIs then yeah a server action is the best choice
But "should" is not a thing