[🐞] Resource component is blocking the rendering

[Nisfan]

Which component is affected?

Qwik Runtime

Describe the bug

I am using routeLoader$ with defer along with <Resource> component. Resource component is blocking the rendering, components after Resource component doesn't show up until the promise is resolved

I took this from https://www.builder.io/blog/qwik-city-server-functions

You can see the footer component is blocked

https://user-images.githubusercontent.com/22009890/230802518-ea936362-ccd4-4bc3-b547-23dfb1269ada.mp4

I couldn't able to reproduce it since defer itself isn't working on stackblitz.com https://stackblitz.com/edit/c-dshx6s?file=src%2Froutes%2Findex.tsx

Note: defer is working fine on my machine

Reproduction

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.19 Ubuntu 22.10 22.10 (Kinetic Kudu)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 5.95 GB / 15.51 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 19.6.1 - ~/.nvm/versions/node/v19.6.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v19.6.1/bin/yarn
    npm: 9.4.0 - ~/.nvm/versions/node/v19.6.1/bin/npm
  Browsers:
    Brave Browser: 112.1.50.114
    Chrome: 112.0.5615.49
    Chromium: 111.0.5563.146
    Firefox: 111.0.1

Additional Information

No response

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• c-dshx6s (Open reproduction)

[Shadowfaxenator]

It's not working even after 1.0 release... please comment on this, it's one of the main features that is not working

[bbigras]

I couldn't able to reproduce it since defer itself isn't working on stackblitz.com https://stackblitz.com/edit/c-dshx6s?file=src%2Froutes%2Findex.tsx

@Nisfan it's me or the URL doesn't work anymore?

[bbigras]

here's another example https://stackblitz.com/edit/qwik-starter-e3vkvd?file=src%2Froutes%2Findex.tsx

@manucorporat can we get an official comment on this please :pray: ?

[bbigras]

Here's an updated version https://stackblitz.com/edit/qwik-starter-988gug?file=src%2Froutes%2Findex.tsx

[wmertens]

So what you want is out of order streaming and that isn't supported yet.

However, it is on the 2.x roadmap soon after 2.0.

[gioboa]

That's how the framework is designed. You can have a look at this Cookbook too. If you want render asynchronously specific parts of the page you can use useResource$ So I close this issue because it's working as expected.

[bbigras]

If you want render asynchronously specific parts of the page you can use useResource$

Even with useResource$, the rendering seems to be blocked.

In this stackblitz, the resource is blocking the "Made with ♡ by Builder.io" footer.

https://stackblitz.com/edit/qwik-starter-37fgqb?file=src%2Froutes%2Findex.tsx

[gioboa]

Even with useResource$, the rendering seems to be blocked.

Yep, Qwik streaming is working like this right now.

[bbigras]

Is there any way to load async stuff without blocking (or at least show a "loading...")? or could Qwik v2 help with that?

[wmertens]

Right now the only way is to use a visible task to trigger loading the resource.

Out of order streaming is planned for a later V2 release.

[jkhaui]

I don't mean to throw shade here as I know Qwik has had some very smart people put a lot of hard work into it, and I don't want to take away from your accomplishments.

However, it simply can't be marketed as the fastest framework ever without clearly disclosing that it (currently) has some major limitations, such as no support for parallel/out-of-order streaming.

This has huge implications for real-world vs. theoretical performance. Specifically, any server-side data fetches (which any modern web app is going to require) completely blocks the rendering of any subsequent markup.

So what happens if you have a shopping cart in a header which is dependent on an API call with 2 second latency? If I'm not mistaken, the user will only see the rest of the page below the header stream in after 2 seconds?

That is objectively an awful user experience... If I sound frustrated, it's because these are exactly the scenarios I'm running into when playing around with Qwik. Especially now that React has first-class support for out-of-order streaming, it's simply false advertising to market Qwik as a better or faster alternative

[gioboa]

Hi @jkhaui I don't want to blame or compete with other frameworks, that's our philosophy. So I will only talk about Qwik. As mentioned in the previous messages in this issue, we are working to support out of order streaming in v2. You can check the roadmap here Any help or PRs are more than welcome. Thanks