Next.js Discord

Discord Forum

Invalidate Cache

Answered
B33fb0n3 posted this in #help-forum
Open in Discord
Avatar
Why is an cache invalid, when there are two different components and in one the data is cached and in the other component there will be the host retrieved?
I have a checkredirect components:
import {headers} from "next/headers";

export default function CheckRedirect() {
    const host = headers().get('host');
    console.log("Host: "+ host);

    return (
        <>

        </>
    )
}


That is imported in my layout.js:
            <body className={inter.className}>
                <CheckRedirect />
                <GlobalProvider>
                    {children}
                </GlobalProvider>
            </body>

The page (children) itself have a getTodoList function which is cached:
export const revalidate = 120;

export const getTodoList = cache(async () => {
    console.log("TodoListFetchCalled")
    const {data} = await API.graphql({query: listTodos});
    return data;
})

export default async function Homepage() {
    const data = await getTodoList();

    return (
        <div className={"flex px-6 py-6 w-full"}>
            <TodoList data={data.listTodos.items}/>
        </div>
    )
}

Yes the cache works, when I don't have CheckRedirect. But when I have the CheckRedirect, it renders all the time and not after 120 revalidation time. Why and how can I resolve this issue?
Answered by fuma πŸ’™ joulev
You can handle your redirect logic in [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware), which has a better performance.
View full answer

3 Replies

Avatar
Using dynamic functions like headers will opt your page into dynamic rendering, which renders everything when the user opens your page.
Avatar
You can handle your redirect logic in [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware), which has a better performance.
Answer
Avatar
ah that looks good, thanks Γ°ΕΈβ€˜Β