cache: 'no-store' does not work in nextjs 13

Question

I have a server component in nextjs. I want to send a request to API to get data every time this page is loaded. that's why I apply { cache: 'no-store' } to fetch and also set revalidate to 0, but It does not work. the first time It requests to API and in the second and third and .. does not send request.

I think it fetches data from the cache.

NOTE I added import 'server-only' but does not affect it.

import 'server-only';

async function getPosts() {
    const res = await fetch('http://localhost:4000/posts', { cache: 'no-store' })
    return res.json()
}

export const revalidate = 0;

export default async function ServerPage() {
    const posts = await getPosts()

    return (
        <div>
            <h2>Server Props...</h2>

            <ul>
                {posts && posts.map(({ id, title, body }) => {
                    return (
                        <li key={id.toString()}>
                            <strong>{title}-{id}</strong>
                            <p>{body}</p>
                        </li>
                    )
                })}
            </ul>
            
        </div>
    )
}

How can I solve my problem ?

Veto

If you are using app directory(beta) then by default all the files inside app are server components so you dont need to use server-only but you need to use use-client whenever you want it to be client component. – Brubeck

Answer 1

You can try adding export const dynamic = 'force-dynamic', which will solve the problem (did for me as I wasn't using the fetch method but apollo client), as by default all pages are static, though the no-caches that you applied should have worked.

Also, you may need to add export const revalidate = 0, as well to fetch it on every request.

Queeniequeenly

Answer 2

'no-cache' and 'no-store' produce different results for me. On the documentation it says "The no-cache option behaves the same way as no-store in Next.js". However when i put 'no-store' on a statically generated page fetch request i get this error “Entire page... deopted into client-side rendering." When i put "no-cache" on the fetch i dont get that error, and the page is still an SSR page.

I think its because no-cache will cache the response, but client will check server before using that cached data

So try "no-cache"

Ursulina

Answer 3

I did a simple test with [email protected], the cache: 'no-store' works as expected.

// utils.ts
export async function getTodo(id: number) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
  return res.json();
}

// app/page.tsx
import { getTodo } from '../utils'

export default async function Page() {
    const task = await getTodo(1);
    return (
        <div>home page</div>
    )
}

// app/todo/page.tsx
import { getTodo } from "../utils"

export default async function Page() {
    const task = await getTodo(1);
    return (
        <div>todo page</div>
    )
}

With cache enabled, and request the todo with id 1 from different pages, the output in console

-  ┌ GET / 200 in 1659ms
   │
   └──── GET https://jsonplaceholder.typicode.com/todos/1 200 in 1529ms (cache: MISS)

- wait compiling /todo/page (client and server)...
- event compiled client and server successfully in 576 ms (625 modules)

-  ┌ GET /todo 200 in 1169ms
   │
   └──── GET https://jsonplaceholder.typicode.com/todos/1 200 in 2ms (cache: HIT)

When set cache to no-store, and request the todo with id 1 from different pages, the output in console

-  ┌ GET / 200 in 3272ms
   │
   └──── GET https://jsonplaceholder.typicode.com/todos/1 200 in 2737ms (cache: MISS)

- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 240 ms (301 modules)
- wait compiling /todo/page (client and server)...
- event compiled client and server successfully in 329 ms (625 modules)

-  ┌ GET /todo 200 in 939ms
   │
   └──── GET https://jsonplaceholder.typicode.com/todos/1 200 in 413ms (cache: MISS)

Maybe you made the same request on the same page, in that condition, your requests get deduped

By default, all fetch() requests are cached and deduplicated automatically.

https://nextjs.org/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping

Gamosepalous

How do you configure the console log to see the requests? E.g. GET / 200 in 3272ms. Mine doesn't show them – Unschooled

@Unschooled That's the default logging output of nextjs-cli, I hadn't made extra config – Gamosepalous

to print out fetch log at server side, turn on the experimental config github.com/vercel/next.js/blob/canary/packages/next/src/server/… – Savonarola

Answer 4

Really important do request on the Page not in the Component.

and also have to add to Page -

export const runtime = 'edge';

Darrickdarrill