ストリーミング/遅延ローダー

routeLoader$を使用する場合、デフォルトの動作では、コンポーネントをレンダリングする前に完了するのを待ちます。ただし、routeLoader$が使用される箇所までDOMをレンダリングし、完了するのを待つ方法があります。routeLoader$から非同期関数を返すことで、ストリーミング/遅延レンダリングを行い、即座に視覚的なフィードバックを提供できます。

import { Resource, component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
 
export const useMyData = routeLoader$(() => {
  return async () => {
    await delay(4_000);
    return 'MyData ' + Math.random();
  };
});
 
const delay = (timeout: number) => {
  return new Promise((res) => setTimeout(res, timeout));
};
 
export default component$(() => {
  const myData = useMyData();
  return (
    <>
      <div>BEFORE</div>
      <Resource
        value={myData}
        onResolved={(data) => <div>DATA: {data}</div>}
      />
      <div>AFTER</div>
    </>
  );
});

https://qwik.dokyumento.jp/demo/cookbook/streaming-deferred-loaders/

貢献者

このドキュメントの改善にご協力いただいたすべての貢献者に感謝します！