Next.js Discord

Discord Forum

How to ensure that my fetch requests are memorized? Can I get information in my browser network tab?

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
In my root layout and page I have the same two lines of code:

const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();

Where to find these fetch requests in my browser network tab and see, how long it took to evaluate each one of the two fetches (1 in layout.tsx, 1 in page.tsx).
I tried to click every value in 'Name' column and still haven't found these fetch requests.

Now I kinda realized that maybe I can't get any info from my browser, because these requests run on nextjs server and hence they're not exposed to my browser.
Is there any way to get some info on these fetch requests from nextjs server? What should I do?

The reason I'm asking is: on my another project I use supabase js client and I'm not sure that these supabase calls are memorized (idk what type of fetch my supabase client uses), I wanna check somehow that my supabase js client calls are really memorized.
Answered by Giant panda
As you realized yourself server-side requests cannot appear in the network tab of the browser. Regarding request memoization I typically apply the following logic: if I'm not explicitly using fetch myself, I'm not making assumptions of the underlying implementation details of the library I use and thus wrap it manually using cache to begin with.
View full answer

3 Replies

Giant panda
As you realized yourself server-side requests cannot appear in the network tab of the browser. Regarding request memoization I typically apply the following logic: if I'm not explicitly using fetch myself, I'm not making assumptions of the underlying implementation details of the library I use and thus wrap it manually using cache to begin with.
Answer
Giant panda
Makes reasoning much easier since you never know when the implementation might change.