How do you guys handle data fetching during navigation? (next.js page router + getInitailProps)
I’m using the Page Router with getInitialProps.
Let’s say I’m navigating between pageA and pageB (e.g., Page A → Page B → Page A).
I want users to always see the most up-to-date data, not stale content.
How do you typically approach data fetching in this scenario?
Here are some options I’ve considered:
(1) useQuery(Stale-while-revalidate)
This works well for client-side rendering (CSR), as it allows showing cached data first while revalidating in the background.
However, it has a few drawbacks:
- It often results in double fetching during hydration
- Since revalidation happens in the background, users may briefly see stale data before fresh data arrives.
- You also need to manually control the query using flags like isFetching, keepPreviousData, or enabled.
(2) Fetching inside getInitialProps for both SSR and CSR + with useSuspesneQuery
This approach ensures data is always fetched before rendering, whether on the server or during client-side navigation.
The trade-off is that client-side transitions can feel slow, since users must wait for the data to be fully loaded before the page renders.
(3) Handling SSR and CSR differently + with useSuspenseQuery
SSR: Fetch data on the server and hydrate the page with it.
CSR: Use startTransition to show a loading state at eventHandler or clear the data at getInitialProps so that React Suspense can handle the loading on the destination page.
0 Replies