You would wrap the client component in a server component - make the fetch from the server component, then pass the result down in props to the client component

Damn that's so overcomplicated. So I need 2 files, right

Are you sure your component needs to be a client component in the first place?

Yup, useEffect

Then yes if you want to avoid making the request from the client you'll need to wrap it in a server component

Aight

So doing something like getServerSideProps on pages router no longer exists?

cause that method was way easier

Server components are the equivalent of getServerSideProps - I find them more intuitive, what are you finding tricky?

It's not tricky, but getServerSideProps seems like a better solution to me

The app router method is kinda weird

I've heard some mixed reactions!

Hey @josh really sorry that I ping about this, but, how can i make a update to db in a save popup? the save popup has to be a "use client". I saw some stuff about server actions but not too sure about it beacuse when clicking the save button, i also need to run a client side thing to hide the popup

the app router is so confusing

You should make the handler an async function. You should create a server action (which also should be an async function) in a separate file and write 'use server' at the beginning of the file. Inside the handler, you call the server action and then set the client state that you want (also inside the handler).

but im so unhappy about having to like duplicate the page file to make a server side request..

thats kinda dum

You don't have to create another file just for server actions. I prefer doing that way, but it isn't necessary.

Talking bout the fetching to display for the user

not saving rn

saving is okay but fetching is weird

You could do something like:

const handler = async () => {
  const updateDB = async () => {
    'use server'
    // code to update the database
  }

  const { data, error } = await updateDB()
  // do something with the return above
  
  setPopUpOpen(false) 
}

And you pass the handler to the form/button.

Hm, alright, thanks