I have a next.js app using pages router, and tRPC/useQuery, hosted on vercel. It has public dynamic pages setup for events. The url would be something like /events/[slug]. These pages should load fast and be SEO friendly so I chose to use getStaticProps and ISR to re-render them every minute (at most).
My expected behavior is that the page is at most 60s old at all times. This means that even if the user is just navigating between pages, when they come back to this event page, the data should be fresh. Now I hear this is not actually the expected behavior from next.
With the code below I can get the revalidation to work every 60s, however after 60s have passed, the data is only new if I press Cmd+R or hit the same url again. How can I achieve the desired behavior? Should I make next.js ignore in memory cache? Should I try to use tRPC's server-side-helpers*?
*I just haven't tried this because I think I will need to define an inner and outter context and that will take some time for me
export default Page({
data,
slug,
}: InferGetServerSidePropsType<typeof getStaticProps>) {
return (
<div style={{ flex: 1 }}>
<Head>
<title>{data.title}</title>
</Head>
<ViewEventScreen data={data} />
</div>
)
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const slug = params?.slug as string
data = await EventService.getBySlug(slug)
if (!data) return { notFound: true }
data = JSON.parse(safeJsonStringify(data))
return {
props: {
data,
slug,
},
revalidate: 60,
}
}
export const getStaticPaths: GetStaticPaths = async () => {
return { paths: [], fallback: 'blocking' }
}
I've tried to pass the data returned from getStaticProps as initData on a client side useQuery call, but this does not prevent it from loading it the first time, it only sets a "placeholder data".