thomasreichmann
commented
2 months ago Fixed in a few commits that I'm not bothered enough to go looking for.
Essentially the problem was that we were not actually ssr'ing anything, because during ssr we were receiving an error, which caused the first load of the page to be an 500 error page, that for some reason was blank (with the correct color for the background, which is why it was difficult to notice).
This was happening because we were doing a 'prefetched' query similar to how we did it in the settings modal. https://github.com/thomasreichmann/upload-thomasar/blob/8947ba2dbffd877c6ec8376e2e52d547689d9d78/src/app/_components/settings/settingsButton.tsx#L10-L13
here
but in the settings modal query, up in the component tree, in a server component we were running a prefetch for the user
while in the files query we had no component further up in the tree doing that. (and since the two components are in different branches of the component tree, they do not use the same shared prefetch) The solution was to just add a prefetch in the server component wrapper for files.
A few considerations
Even though adding the prefetch works, and does the job, in theory we should be able to use useSuspenseQuery with a suspense boundary without the whole ssr of the page failing, which for me makes the real cause of this bug still unknown, since even though adding the prefetch fixes the issue, it shouldn't even be happening in the first place.
There is still some investigation needed on why this even happened, and how we can use suspense for its actual purpose without this kind of error happening, since we will want to use later on in the application.
Also:
We should look in to why the ssr'd? error page was blank and not actually showing something, even stranger when you opened the console after render, it would show nothing, the error line would only even appear in the console when we refreshed the page with the console open.
when reloading the user first sees an empty background and then is populated