Different Loading Patterns
Answered
Atlantic menhaden posted this in #help-forum
Atlantic menhadenOP
What are the differenced in loading patterns between these 3 sites?
The first 2 seem to have basically permanent (although updated) content whilst the last one revalidates upon each request.
I would presue it's ISR but could someone go into a little more detail as i want to implement it to keep my function invocations down.
Thank you :)
The first 2 seem to have basically permanent (although updated) content whilst the last one revalidates upon each request.
I would presue it's ISR but could someone go into a little more detail as i want to implement it to keep my function invocations down.
Thank you :)
Answered by joulev
First two: ISR
Last one: either dynamic rendering or client side rendering
Last one: either dynamic rendering or client side rendering
8 Replies
@Atlantic menhaden What are the differenced in loading patterns between these 3 sites?
The first 2 seem to have basically permanent (although updated) content whilst the last one revalidates upon each request.
I would presue it's ISR but could someone go into a little more detail as i want to implement it to keep my function invocations down.
Thank you :)
First two: ISR
Last one: either dynamic rendering or client side rendering
Last one: either dynamic rendering or client side rendering
Answer
@joulev First two: ISR
Last one: either dynamic rendering or client side rendering
Atlantic menhadenOP
Are you still able to do some client side rendering with isr? since the first one loaded up the static content but then rendered in my theme afterwards
@Atlantic menhaden Are you still able to do some client side rendering with isr? since the first one loaded up the static content but then rendered in my theme afterwards
Yes. Not sure what “my theme” here meant but in the first one, I see ISR for data and CSR for auth
@joulev Yes. Not sure what “my theme” here meant but in the first one, I see ISR for data and CSR for auth
Atlantic menhadenOP
Sorry yeah so initial theme on reload = pink. Then it loads in my preference which is orange
Are there any docs to reference when it comes to mixing ISR with CSR?
@Atlantic menhaden Are there any docs to reference when it comes to mixing ISR with CSR?
ISR is server-side. CSR is client-side. Use react-query or swr on any client components and you have CSR. For ISR, check https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration
@joulev ISR is server-side. CSR is client-side. Use react-query or swr on any client components and you have CSR. For ISR, check https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration
Atlantic menhadenOP
is it possible to cache server actions to reduce the number of function invocations?
this is what im currently doing:
And inside
this is what im currently doing:
export const revalidate = 300;
export default async function Page() {
const titles = await getAllTitles();And inside
getAllTitles i added a console log which runs everytime i refresh the page despite ISR which consumes function invocations@Atlantic menhaden is it possible to cache server actions to reduce the number of function invocations?
this is what im currently doing:
tsx
export const revalidate = 300;
export default async function Page() {
const titles = await getAllTitles();
And inside `getAllTitles` i added a console log which runs everytime i refresh the page despite ISR which consumes function invocations
ISR is prod mode only. If you run the app in prod mode, it is only run once every 300 sec.
Remove the use server directive. getAllTitles should not be a server action. Server actions are for client-side mutations only.
Remove the use server directive. getAllTitles should not be a server action. Server actions are for client-side mutations only.