Cache not working with Next.js

[gabsn]

Getting the error There is no persistent storage on the Server currently when using useFetch with persist: true in a Next.js app:

  const { loading, data } = useFetch("/api/ip", { persist: true }, []);

This is due to the use of useSSR here: https://github.com/ava/use-http/blob/8a850892c0748766d6eeb6f3065a01c10413be86/src/useCache.ts#L16 which return isServer: true and therefore throw an error.

The problem is that in the context of Next.js we need to wait for component mount before being able to use a global browser variable (See this thread for more details)

So here comes the paradox:

• we need to wait for component to mount before calling useFetch(url, { persist: true }, [])
• we need to call the hook at every render and cannot wait for some conditions to be fulfilled

A potential solution might be to make the check on isServer optional for Next.js users.

[iamthesiz]

Will respond. Need time to think. Bare with me.