You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Remix is rendering the Suspense fallback content on the server and when React hydrates, the actual content pops in.
The reason why i'm making this issue is that, if this is the normal behavior this goes agains most of the Remix principles. Suspended content in remix currently means: client side only, bad for seo, popcorn style page loads (jumpy).
Just to give some context as to why i am loading dynamic components on the frontend that should server render.
I'm using Storyblok, and each block in the Storyblok CMS equals a React component in Remix. And for a larger project the amount of blocks in Storyblok can quickly run up to +50, which means 50 react components. If there is no way to server render dynamic components the initial load will contain all the +50 React components.
Same issue using the ClientOnly-Component from remix-utils. Only the fallback component gets rendered on deployed environments but works fine for local development (Deployed using sst.dev)
I think this is expected behavior, since this's how suspense work.
And what suspense would render depends on the timing that's the lazy import finished. if it finished before the Suspense rendering, then suspense would just render content.
You can try to modify you code like this in your nextjs demo,
If you lift the lazy() called into the module scope or somewhere it won't be re-initialized every render you should be good to go. Lazy / Suspended components will render on the server and stream to the browser upon resolution if they are inside a suspense boundary.
What version of Remix are you using?
1.15.0
Are all your remix dependencies & dev-dependencies using the same version?
Steps to Reproduce
Expected Behavior
I personally think we should see the actual content on server rendering instead of the fallback content.
Next.js does seem to render the actual content on SSR
-> https://stackblitz.com/edit/nextjs-5xhaqa?file=pages%2Findex.js,dynamic-component.js
Actual Behavior
Remix is rendering the Suspense fallback content on the server and when React hydrates, the actual content pops in.
The reason why i'm making this issue is that, if this is the normal behavior this goes agains most of the Remix principles. Suspended content in remix currently means: client side only, bad for seo, popcorn style page loads (jumpy).
Just to give some context as to why i am loading dynamic components on the frontend that should server render.
I'm using Storyblok, and each block in the Storyblok CMS equals a React component in Remix. And for a larger project the amount of blocks in Storyblok can quickly run up to +50, which means 50 react components. If there is no way to server render dynamic components the initial load will contain all the +50 React components.
Might be related to #5763
The text was updated successfully, but these errors were encountered: