Weird bug with the new ConvexQueryCacheProvider and Nextjs Prod version
After I added the
ConvexQueryCacheProvider to my Providers, every time I click on the "emojinx" logo, or on any of the buttons that redirect to the home page, it breaks the sync between Convex and NextJS app and nothing else loads.
The weird part is that if I navigate using the Browser's history (back button), then it works fine.
The app is live at https://emojinx.lucasfaria.dev/
If you check the console, you'll see that I'm logging both the debug from the cache and { games } on the main page and { game } on a game page.
Those objects are just what's being returned from the useQuery.
Providers component: https://github.com/lucasheriques/emoji-match/blob/745f4b3af9900ea715f9a78914c890686e42d75a/app/providers.tsx
useGames hook: https://github.com/lucasheriques/emoji-match/blob/1b9ecc81b8dbe8cb9d4598c0a3d0bfce5382b6d5/components/rooms/hooks/use-games.ts
RoomList component, which runs on the index page: https://github.com/lucasheriques/emoji-match/blob/745f4b3af9900ea715f9a78914c890686e42d75a/components/rooms/rooms-list.tsx
The code is fully open source, in case you need more details. Feel free to ask.
Not sure what's happening here - it works fine locally with next dev. The error also happens with next build && next start so I don't think it's related to Vercel.2 Replies
Without digging deep, I'd expect that this is some SSR interplay. When you click on the logo Next.js tries to render the page on the server and then hydrate? (this doesn't answer your question, but maybe it's a helpful direction)
yeah I'm thinking the same. Nextjs does indeed render on the server to hydrate after. Curious though about why the error only happens on the home page and not on the game rooms page
fixed it by adding
export const dynamic = "force-dynamic"; on the app/page.tsx