Hydrates to empty html instead of server rendered html

[Pranab16]

🐛 Bug Report

When we are using SSR, Loadable replaces it with fallback HTML during hydration. This is causing empty div at the time of hydration and then client side re-renders the whole HTML. Instead, it should not replace server rendered HTML.

To Reproduce

Steps to reproduce the behavior: I have created codesandbox to reproduce it easily. Please take a look: https://codesandbox.io/s/wizardly-bush-fwsmy

Expected behavior

During hydration, it should render SSR HTML as is instead of fallback HTML

[open-collective-bot[bot]]

Hey @Pranab16 :wave:, Thank you for opening an issue. We'll get back to you as soon as we can. Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers. If you use Loadable at work, you can also ask your company to sponsor us :heart:.

[asifrahman001]

I am also facing the same issue. This is causing blank intermediate screen when my page is server side rendered. Any update on issue?

[theKashey]

Given example is a little invalid. Not like it just broken (it is), but loadable needs it's @loadable/server part and special meta tags injected in the header, which are missing right now.

[asifrahman001]

@theKashey @loadable/server part is already implemented in my case. Can you specify which meta tags are required for this. Because, I didn't find any description about meta tags in the official doc.

[asifrahman001]

@Pranab16 Were you able to find any fix for this?

[Pranab16]

@asifrahman001 In my case, I was doing loadable for pages and then inside components as well. At the time of hydration, Loadable only hydrates top level loadable pages and not the child components. I had to move on in the favor of react 18 lazy and will wait for it's launch.

[theKashey]

@asifrahman001 - LOADABLE_REQUIRED_CHUNKS and __LOADABLE_REQUIRED_CHUNKS___ext https://github.com/gregberge/loadable-components/blob/9b34195627c65372a7c834311c32dfcbd5b7fedd/packages/server/src/ChunkExtractor.test.js#L69

They indicate for which scripts loadable should wait before trying to render a component.

[ashishdocforce]

Anyone found any solution for this problem yet?

[AlyonaPianykh]

@theKashey Hello! Any updates on this issue?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[anthonydeguzman]

I had this issue recently with react-router. It was caused by having the most top level component (my routes) rendered with loadable component. That component should be imported normally then you can use loadable components for sub components, pages, etc.

[theKashey]

This is not an issue with "loadable-components", this is how React/Suspense/Your application is working. And there is no such thing as "That component should be imported". No, there are no such restrictions or rules.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lizijie123]

@asifrahman001- LOADABLE_REQUIRED_CHUNKS和 __LOADABLE_REQUIRED_CHUNKS___ext

https://github.com/gregberge/loadable-components/blob/9b34195627c65372a7c834311c32dfcbd5b7fedd/packages/server/src/ChunkExtractor.test.js#L69

它们指示在尝试渲染组件之前应等待哪些可加载脚本。

This is correct for me