server side prefetch + optional client side refetch
Hello,
I'm looking for advice on a pattern for server-side prefetching with optional client-side refreshing in Next.js.
Current setup:
- Next.js app with tRPC
- A
getUserGuilds
procedure that accepts an optional refetch
parameter
- When refetch: true
, it fetches fresh data from Discord, otherwise uses cached data
- Server-side prefetch for initial load, need client sided optional refresh
Current solution:
I'm using two separate queries:
1. First query with no parameters matches server prefetch for initial load:
server prefetch:
2. Second query with refetch: true
for manual refreshing:
3. Using separate useEffects to update UI state when either dataset changes
1 Reply
While this works, it feels like there should be a nicer way?. Is there a recommended approach for handling this server-prefetch + client-refresh scenario with tRPC in Next.js?