Server Actionsa re not meant for fetching

I guess you meant "use server" in the second piece ?

(looking for the docs, the page has moved of course...)

here

"Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value."

yes, I meant "use server" sorry

ok, that makes sense, thanks

so to fetch data from my databse for example in server components I can just await the function and it will not expose any APIs to the user, correct?

and on the client components what would be intended way to do so? Create an API route and use SWR?

You could create an API route and use whatever client side fetching lib you prefer.
But keep in mind that should be a (very) rare usecase when it comes to GETTING data.
The way is to make a server component get (fetch) the data there and pass the data down to your client components

This is something that I did initially but it felt like prop-drilling. Also I want to re-validate some of my data without users refreshing the page and this is where useSWR looks promising to me. And I don't know how to update the data for user every 5 minutes or so

Regarding the prop drilling:
Fetch data where is needed. The fechting Server component should be as close to the consuming client component as possible (at the leaf)
Don't worry about doing the same fetch call in different Server components, Nextjs will automatically memoize the fetches and make sure that only one request is made in via network.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

Hm i wanted to write something else but you changed your question i can't remember now 😄 anyways hope that still answers it

Yea you can use fetch('https://...', { next: { revalidate: 3600 } }) for the second part

Yeah, I'll try this out and see if it does what I want, so general rule is to fetch data in server components and pass them down to client components, almost always

I am moving to using redis as a cache, which will store a lot of data which will constantly be updating, I want users being on page /todos/ have a list of all todos, whenever my redis cache changes (or every 2 seconds for example) I want users to have updates visible, without the need to reload the page

And to get such data from redis/database or whatever, I should make a server action and run the server action in server component, correct? Or directly call the API in the server component

Your sentence has get datain it

its always a server component and directly call

server actions are for mutating data

ok, thanks, what if I have a case where I want to get data based on user's input? So he selects a category and I want to get just this category's items. I could probably get all data in the server component and then filter based on what user chose, but this somehow feels wrong, since there could be a ton of records to filter out and a lot of user's inputs

In most cases url params ?filter="north" aka query params aka searchParams
Setting searchParams in client component "syncs" the url state back to server component which can read it using function ServerComponent({searchParams})

that's how I had this setup already, but I was getting and passing params in client components, ok, I'll try this new approach, I really want to clean up my code and do things the intended way, thanks for clarifying things up so far, if you don't mind I might ping you again if I encounter more problems with this, thanks

IMO, the reason of using GET method over POST method for getting data is because the response of GET can be cached while POST cannot. Graphql also using POST method for querying data by default.
For your case, I think it doesn’t matter since you are expecting the data is changing frequently and you will need either swr or react-query to update the UI without refreshing the page with refreshInterval option. You could fetch the initial data on server component and pass it down to client component as initialData. In addition, if you don’t feel like prop drilling, react-query provides a [good way](https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data) for it

thanks Ray

Ray is the 🐐 whatever he says is 10x more correct than whatever i am yapping

ok, so assuming I want to fetch let's say additional data every 2 seconds using SWR, I should make an /api/ route with POST where I can get the data and hit this with the fetcher function, correct?

Inside the /api/route.ts I would access my redis instance, get the data and return it

I would use GET endpoint for it

because I don't think I can get data from redis or my db using "fetch"

keep in mind that, the GET endpoint is static by default, you could use route segment config to change it

could you explain what that means? I don't think I know of this

export const dynamic = 'force-dynamic'
or
export const revalidate = 0
in the route.ts to make it dynamic

oh, so that means GET endpoints are "evaluated during build" or do they just have longer cache? and I have to force them to not cache and handle that by redis, or perhaps make the cache period low

both, GET endpoints are run during build and cached by default

ok, this explains and clarifies a lot of things, thanks for help guys, I'll go ahead and fix the mess I made

to avoid prop drilling in RSCs: https://stackoverflow.com/a/75533592/5513532

for fetch it's easier because it already dedupes call (memoization) but just in case the SO post also explains how it works for non http data

or value you compute on the fly

oh, this also looks promising for a different use case I have, thanks