Suspense only renders fallback content on SSR

[gijsroge]

What version of Remix are you using?

1.15.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. clone https://github.com/gijsroge/remix-suspense-issue and run remix
2. view page source or disable js.

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

[minizwergi]

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)

[lili21]

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,

import { Suspense, lazy } from 'react';

export default function Home() {
  const Component = lazy(() => {
    return new Promise((resolve) =>
      import('../dynamic-component').then((v) => {
        setTimeout(() => {
          resolve(v);
        }, 2000);
      })
    );
  });
  return (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <Component />
      </Suspense>
    </>
  );
}

and it will always render the fallback.

[jacob-ebey]

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.

[nboliver-ventureweb]

@gijsroge did you find a solution to this? I have a similar setup with dynamic components coming from a CMS but it seems to be popcorn loading / causing page speed issues.

[defiled]

yea, same issue here. how are you supposed to render client only components that need to interact with the dom in remix?

[gijsroge]

@nboliver-ventureweb @defiled i ended up loading all my components up front. I think RCS will allow you to do this more easily in the future.

[nboliver-ventureweb]

@nboliver-ventureweb @defiled i ended up loading all my components up front. I think RCS will allow you to do this more easily in the future.

Thanks, yeah that's what I ended up doing too. No Lazy / Suspense for now 😞