Reza Safari Blog
Published on

About using fetch

Regarding fetch: I've recommended before that you don't need to use axios in projects unless you have a very specific need that I haven't encountered so far. The documentation makes it very clear that libraries that don't directly use fetch don't affect cache performance. However, another solution has been proposed elsewhere, which is using route segments.

Like this:

export const revalidate = 3600;

You can read more about it here: Fetching data on the Server with third-party libraries

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries

One important note: there is a function called "cache" that can be used in a certain way.

const req = cache(async () => {
  const res = axios.get("...");
  const data = res.json();
  return data;
});

This is possible to do, but in practice, this function is slow, and it's not recommended to use it. Its slowness becomes noticeable at a high scale, but it doesn't create issues in typical use cases.

Regarding SWR: You can provide the data that comes from the server as a fallback to SWR. This way, a cache key is created, and SWR's subsequent behavior is based on it. However, in the documentation, there is a section for SSR, but it's still considered unstable.

read this link to know more about the feature

https://swr.vercel.app/docs/with-nextjs