Nextjs App Router cache the page...
Answered
Rampur Greyhound posted this in #help-forum
Rampur GreyhoundOP
Hi everyone i have a nextjs app (with app router) with 3 pages Page1, Page2 and Page3... i have a server action that check if user is authenticated by a jwt saved as cookie
I use this server action in every page but if i change page for example from page1 i go to page2 and then i change in page1, page1 not call server action.
I try to put export const dynamic = 'force-dynamic' but nothing....
How can resolve this problem,
I use this server action in every page but if i change page for example from page1 i go to page2 and then i change in page1, page1 not call server action.
I try to put export const dynamic = 'force-dynamic' but nothing....
How can resolve this problem,
Answered by Ray
if you really need to run that action in every navigation, try running the server action in a
useEffect. And if you need it to run on multiple page, you could use template.tsx for it24 Replies
@Rampur Greyhound Hi everyone i have a nextjs app (with app router) with 3 pages Page1, Page2 and Page3... i have a server action that check if user is authenticated by a jwt saved as cookie
I use this server action in every page but if i change page for example from page1 i go to page2 and then i change in page1, page1 not call server action.
I try to put export const dynamic = 'force-dynamic' but nothing....
How can resolve this problem,
there is a 30 sec router cache in soft navigation
https://nextjs.org/docs/app/building-your-application/caching#router-cache
https://nextjs.org/docs/app/building-your-application/caching#router-cache
try to wait for 30 sec and navigate to the page again
if you really need to run that action in every navigation, try running the server action in a
useEffect. And if you need it to run on multiple page, you could use template.tsx for itAnswer
@Ray if you really need to run that action in every navigation, try running the server action in a `useEffect`. And if you need it to run on multiple page, you could use `template.tsx` for it
Rampur GreyhoundOP
You mean to put the check inside template?
@Rampur Greyhound You mean to put the check inside template?
yes put it inside
useEffect in template@Ray yes put it inside `useEffect` in template
Rampur GreyhoundOP
Great it works! So i'm using this flow to understand if it's present a cookie. With template and useEffect i can check it everytime that i change page... but i'd like to show error.js view if the check return false... Do you think is it possible?
@Rampur Greyhound Great it works! So i'm using this flow to understand if it's present a cookie. With template and useEffect i can check it everytime that i change page... but i'd like to show error.js view if the check return false... Do you think is it possible?
I think you can try throw an error in the server action instead of return false
but please note that this only work if the client have javascript enabled
Rampur GreyhoundOP
You suggest another solution?
only this solution for now😆
Rampur GreyhoundOP
There is something that not works....
├── app
│ ├── (main)
│ │ ├── books
│ │ │ └── page.tsx
│ │ ├── dashboard
│ │ │ └── page.tsx
│ │ ├── about
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ └── template.tsx
│ ├── login
│ │ └── page.tsx
│ ├── error.tsx
│ ├── favicon.ico
│ ├── layout.tsx
│ ├── loading.tsx
│ ├── not-found.tsxin template i check if a cookie exists....
a simple method:
"use server"
export const userIsAuth = async () => {
try {
await checkCookie();
} catch (error) {
return "NO COOKIE";
}
};but error.tsx not shown
where is the error?
@Rampur Greyhound a simple method:
"use server"
export const userIsAuth = async () => {
try {
await checkCookie();
} catch (error) {
return "NO COOKIE";
}
};
throw the error
"use server"
export const userIsAuth = async () => {
try {
await checkCookie();
} catch (error) {
throw new Error("NO COOKIE")
}
};Rampur GreyhoundOP
nothing to do... it return this error and not error.tsx is shown
maybe try calling the action with useTransition
Rampur GreyhoundOP
nothing... probably i cant use this schema if i use "use client" in template
well it might be normal because error bondary does not catch
Error boundaries do not catch errors for:
Event handlers (learn more)
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
Server side rendering
Errors thrown in the error boundary itself (rather than its children)
Rampur GreyhoundOP
So I have to use use state to set error is it right?
Rampur GreyhoundOP
I let you know thanks ðŸ™
Rampur GreyhoundOP
Ok I think to open a new thread for this problem I marked this as result