Does Caching function work if I use Axios Library on Next.js- Next.js14

[wonch0314]

Summary

Next.js Version: 14.x & Using Library: Axios

I understood when I use fetch (get method) on Next.js, caching function is working.
I wonder caching would work or not if I use Axios.

Thank you for reading my Question

Additional information

No response

Example

No response

[erlanggaht]

The same question has not been answered until now.. Cache control in NextJS using Axios doesn't work :(

[wonch0314]

@erlanggaht What do you think of using fetch when I call GET method and using Axios when I call the others (POST, DELETE, PUT, ...). Do you think it is a good way or bad way??

[erlanggaht]

If the data fetched via GET requests changes frequently or is not static, it is recommended to use the FETCH method instead of Axios. Fetch allows better control over caching and revalidation. To test this, you can build a Next.js application and modify the fetched data.

Here are the expected outcomes:

If you use Axios:
    The fetched data will remain static and won't update dynamically. To see changes in the fetched data, you'll need to rebuild the application.

If you use Fetch with cache set to "no-cache":
    The fetched data will update dynamically as it changes.

The key factor here is the nature of your data. If the data is static, using Axios is sufficient. However, if you need the fetched data to change dynamically, it's better to use Fetch with cache control options.

Hopefully, Axios will provide better support for cache control in Next.js in the future. I hope this explanation helps clarify the difference between using Axios and Fetch in handling dynamic data fetching in Next.js.

[vishal590]

If the data fetched via GET requests changes frequently or is not static, it is recommended to use the FETCH method instead of Axios. Fetch allows better control over caching and revalidation. To test this, you can build a Next.js application and modify the fetched data.

Here are the expected outcomes:

If you use Axios:
    The fetched data will remain static and won't update dynamically. To see changes in the fetched data, you'll need to rebuild the application.

If you use Fetch with cache set to "no-cache":
    The fetched data will update dynamically as it changes.

The key factor here is the nature of your data. If the data is static, using Axios is sufficient. However, if you need the fetched data to change dynamically, it's better to use Fetch with cache control options.

Hopefully, Axios will provide better support for cache control in Next.js in the future. I hope this explanation helps clarify the difference between using Axios and Fetch in handling dynamic data fetching in Next.js.

what if I use React Query ?

[Yash-Chauhan-Skords]

even with react query u have to use either axios ot fetch
tbh caching is just BS on next js
im getting old stale data of previous user
that is current user im logged in as is "A"
im getting data for A but after logging out and logging as B i still see A's data everywhere unless i refresh my application

i tried force dynamic on root layout ( i had to add it on root layout because individual pages uses dynamic components )

this is soooo frustrating.

[vishal590]

but react-query refresh data by itself automatically, and if you don't want to refresh you can add parameter