[🐞] Elements processed out of order with no SSR

[ulic75]

Which component is affected?

Qwik Runtime

Describe the bug

When I run pnpm vite and view the page as defined below I see 2, 3, 1 printed to the browser console. However when I run pnpm vite --mode ssr and view the page I see 1, 2, 3 printed to the server console.

If you add additional children it just trickles down, the FIRST is always executed LAST in non-ssr. In the DOM it appears in the correct order in both scenerios. This makes component testing challenging when you are expecting a precise ordering.

import { component$ } from '@builder.io/qwik';

const Child = component$((props: { order: string }) => {
  console.log(props.order);
  return <div>{props.order}</div>;
});

export default component$(() => {
  return (
    <div class="test">
          <Child order="1" />
          <Child order="2" />
          <Child order="3" />
    </div>
  );
});

Reproduction

https://stackblitz.com/edit/qwik-starter-tvnpeu?file=src/root.tsx

Steps to reproduce

1. Allow the blitz to run as default
2. See 1,2,3 printed to the server console
3. Ctrl-C to kill the server
4. Start server in non-ssr with npm run start-nossr
5. See 2,3,1 printed to the browser console

System Info

System:
    OS: macOS 13.1
    CPU: (8) x64 Intel Xeon Processor (Cascadelake)
    Memory: 18.87 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Firefox: 110.0.1
    Safari: 16.2
  npmPackages:
    @builder.io/qwik: 0.105.0 => 0.105.0 
    @builder.io/qwik-city: ~0.104.0 => 0.104.0 
    undici: 5.22.0 => 5.22.0 
    vite: 4.3.3 => 4.3.3

Additional Information

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-tvnpeu (Open reproduction)

[ulic75]

Related to #4757

[wmertens]

Here's a playground demonstrating the issue.

Interestingly, the second time you render on the client it does do it in order.

However, I don't think this will get fixed. There's no guarantees on rendering order, and implementing such guarantees takes effort, continued maintenance, and might impact performance.

@mhevery what's your take on this?

[mhevery]

This has to do in dev mode we lazy load code, which means there is a promise that causes a delay in rendering. I don't think this is something we can fix without a perf penalty, so I would say it works as intended.

I am tempted to close issue as working as intended. WDYT?

[shairez]

The workaround for this problem is to use "inline components" that allow you to track the right order

This is what we did in Qwik UI
https://github.com/qwikifiers/qwik-ui/blob/main/packages/kit-headless/src/components/tabs/tabs.tsx#L76

Closing as working as intended for now

[PatrickJS]

we need docs on this

[shairez]

Thanks @PatrickJS ! good suggestion!

Let's open a new issue about it and reference this issue so we won't forget.