Caching responses from action?
AmruthPillai opened this issue · comments
Is there an existing issue for this?
- I have searched the existing issues and found nothing that matches
Library version (optional)
latest
Ask a question
Is it possible to cache the responses from a next safe action, probably using the middleware, depending on the arguments passed to it?
Additional context
No response
I'm new to this project, but I wanted to call two things out:
- Caching a POST request (i.e. the type of actions that you put in server actions) is an anti-pattern
- In NextJS App Router, you should be fetching data in your Server Component, and then re-render that component as needed.
I understand, but Next.js has really changed how I have to think about traditional data fetching patterns because of the client/server limitations. I'm using Next.js for a very large B2B application.
For example, I am using server actions (as a faux GET) whenever a user opens a dialog/modal and there's a multi-select which allows a user to pick from a list.
The select component is inside a client component, deeply nested, so there's no way to call the get options function without prop-drilling. That's why I make use of actions to fetch data on mounting of this component.
Would be happy to know what other alternatives are out there?
@AmruthPillai you probably want a client request using react-query or SWR.
@delete Does this mean I would need to include multiple GET requests for the same thing? As an example, I'm fetching the current user from the DB (given their session).
I need this information in both client and server components. Does this mean I would need to write the same GET query twice, one as an API to be used internally, and one as a regular 'use server' function that can be called inside a page?
That seems oddly repetitive and inefficient, or am I wrong?
If I understand correctly, you want to access data in a client component that was previously server-side rendered (SSR), right?
I think in some patterns you can follow:
- Store the data in a Context API to make it accessible in a client component.
- react-query's prefetchQuery to prefetch the data on the server and access the cache from the client, avoiding creating a new request.
If you are trying to re-use the NextJS data cache, another option would be to create API routes that call the same fetch functions that are called in your server components. Next will re-use the cache for GET requests.
The new middleware system in next branch/channel (for version 7 of the library) is much more powerful and should allow something like this. However, I agree with the other users that commented here, that you shouldn't really cache a Server Action, since it's used to mutate data. Hope this helps.
I've since moved to the approach of using React Query to fetch get requests. The comments here really did help a lot, and helped me understand the best practice.
I am looking forward to the middleware functionality though as we would have a couple of use-cases for this as well, to run side-effects on a specific POST action. Looking forward to the new release, thank you for all your hard work!