Large monorepo/Next.js refactor to TSR questions/issues
Hi, I have been attempting to refactor our fairly large Next.js codebase to TSR, as I think it solves a lot of the issues and needs we have, and want to test if that is the reality as well.
I have already written codemods that update:
- Link and useRouter usages (+ syntax)
- File route structure
- Adds createFileRoute to each route file + removes default export and sets it as component
+ some other stuff
But I am now trying to get a minimal version working so I can work back from there. However I am running into some questions and issues that I can't really figure out.
1. Is it normal for Vite/TSR to have a very long initial load time for the dev server? It retrieves about 1200 files on the first load. Subsequent isn't so bad because then they are cached.
2. I am using trpc, and any time I comment a trpc query back in, the page just loads forever. No errors in the console, terminal or network tab or anything.
15 Replies
stormy-goldOP•2mo ago
As for point 2. It seems that the component triggering the query (using useSuspenseQuery) ends up in an infinite loop.
rising-crimson•2mo ago
It retrieves about 1200 files on the first load.what is "it" ? the browser?
stormy-goldOP•2mo ago
Yes, correct. My had, should have specified
The infinite loop looks to be related to whenever I use a
useSuspenseQuery(trpc..). With useQuery this does not happen.
Though it doesn't actually fetch either
While this is still happening, it doesn't actually seem to be very slow now.
Slowly but surely making progress. Though now running into an issue where setting ssr: false on a page makes it so it just returns the RootComponent, nothing else. I tried adding shellComponent as suggested in other threads, but nothing. Any idea?rising-crimson•2mo ago
how does your root route looke like?
stormy-goldOP•2mo ago
I managed to make the page work with ssr, so not really an issue anymore. But looks like this right now:
Currently trying to get CSS & CSS modules working. Seems classes are generated, but none of the CSS is actually included on the browser side
rising-crimson•2mo ago
are the css files not linked in head?
stormy-goldOP•2mo ago
Do you need to do so even for css modules?
I do it for the Mantine ones. ill turn it into a gist, only just now realized it got added as a txt
rising-crimson•2mo ago
a full example project would be helpful if you want me to debug anything.
stormy-goldOP•2mo ago
rising-crimson•2mo ago
GitHub
Flash of unstyled content with Mantine & mismatched initial UI · I...
Which project does this relate to? Start Describe the bug I am working on a project using the Mantine component library and am trying out Start. I have set up the basic Start configuration and a ba...
rising-crimson•2mo ago
i just followed the react-router instructions here: https://mantine.dev/guides/react-router/
this looks better: https://codesandbox.io/p/devbox/crazy-platform-56nqtn?workspaceId=ws_XT8z94FXjYTx8gDMksUK7
stormy-goldOP•2mo ago
Oh my god, thanks! Let me try that in our codebase.
I could have sworn I tried the
mantineHtmlProps at some point, is that really the only difference I am missing?rising-crimson•2mo ago
and ColorSchemeScript
we should contribute these instructions to the mantine docs if it works
stormy-goldOP•2mo ago
I do have colorschemescript in our codebase, so must’ve just hallucinated.
Yeah i will contribute it once I confirm this
I dont understand what changed that CSS modules works in your sandbox compared to before?
rising-crimson•2mo ago
I just added color scheme script and mantinehtmlprops