Do Nextjs fetch optimizations work with fetch wrappers, specifically ky?

[DNoel26]

Summary

I can't seem to find an answer on this one. Do all options such as caching work the same as the modified fetch? Or is it basically like using Axios just with fetch?

Additional information

No response

Example

No response

[icyJoseph]

Hi,

It should work fine yeah.

I went ahead a did bit of local testing under dev mode with this option active on my next.config.js file (or .ts):

  logging: {
    fetches: {
      fullUrl: true,
    },
  },

Then I created a page with these contents:

 import ky from 'ky';

export default async function Home() {
   const json = await ky
     .get('https://pokeapi.co/api/v2/pokemon/ditto', { cache: 'force-cache' })
     .json();

  return <pre>{JSON.stringify(json, null, 2)}</pre>;
}

Run the app in dev mode, and in the console:

 ✓ Starting...
 ✓ Ready in 530ms
 ○ Compiling / ...
 ✓ Compiled / in 580ms
 GET / 200 in 754ms
 │ GET https://pokeapi.co/api/v2/pokemon/ditto 200 in 77ms (cache skip)
 │ │ Cache skipped reason: (cache-control: no-cache (hard refresh))
 GET / 200 in 40ms
 │ GET https://pokeapi.co/api/v2/pokemon/ditto 200 in 0ms (cache hit)

The first request I send to the server, finds nothing, the second hits cache.

[icyJoseph]

I guess the formal answer is found here:

• https://github.com/sindresorhus/ky/blob/main/source/core/Ky.ts#L152

Since the constructor used to create the Ky core class, either takes a passed in fetch, or takes the global fetch function, the latter is the Next.js patched fetch.

[DNoel26]

Thank you @icyJoseph ! Really appreciate your detailed response

[icyJoseph]

No worries, please don't forget to mark as answered :) ~ if you are happy with the answer.