combining react query and defer

I have a page that displays

articles

articles

articles

articles and

tags

tags

however I don't want to wait for the

tags

tags

to load before displaying the articles.

Is this the correct way to combine

react query

react query

react query

react query ,

ensureQueryData

ensureQueryData

and

defer

defer

defer

defer to achieve this result?

The full sandbox is here:
https://stackblitz.com/edit/tanstack-router-ezbw75?file=src%2Froutes%2Findex.tsx

export const Route = createFileRoute('/')({
  component: Home,
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData(postsQueryOptions());

    return {
      tagsPromise: defer(queryClient.ensureQueryData(tagsQueryOptions())),
    };
  },
});

function Home() {
  const { data: posts } = useSuspenseQuery(postsQueryOptions());
  const { tagsPromise } = Route.useLoaderData();

  return (
    <div className="p-2">
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (<li key={post.id}>{post.title}</li>))}
      </ul>
      <h1>Tags</h1>
      <Suspense fallback={<div>Loading tags...</div>}>
        <Await promise={tagsPromise}>{(data) => data.join(', ')}</Await>
      </Suspense>
    </div>
  );
}

export const Route = createFileRoute('/')({
  component: Home,
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData(postsQueryOptions());

    return {
      tagsPromise: defer(queryClient.ensureQueryData(tagsQueryOptions())),
    };
  },
});

function Home() {
  const { data: posts } = useSuspenseQuery(postsQueryOptions());
  const { tagsPromise } = Route.useLoaderData();

  return (
    <div className="p-2">
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (<li key={post.id}>{post.title}</li>))}
      </ul>
      <h1>Tags</h1>
      <Suspense fallback={<div>Loading tags...</div>}>
        <Await promise={tagsPromise}>{(data) => data.join(', ')}</Await>
      </Suspense>
    </div>
  );
}

export const Route = createFileRoute('/')({
  component: Home,
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData(postsQueryOptions());

    return {
      tagsPromise: defer(queryClient.ensureQueryData(tagsQueryOptions())),
    };
  },
});

function Home() {
  const { data: posts } = useSuspenseQuery(postsQueryOptions());
  const { tagsPromise } = Route.useLoaderData();

  return (
    <div className="p-2">
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (<li key={post.id}>{post.title}</li>))}
      </ul>
      <h1>Tags</h1>
      <Suspense fallback={<div>Loading tags...</div>}>
        <Await promise={tagsPromise}>{(data) => data.join(', ')}</Await>
      </Suspense>
    </div>
  );
}

export const Route = createFileRoute('/')({
  component: Home,
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData(postsQueryOptions());

    return {
      tagsPromise: defer(queryClient.ensureQueryData(tagsQueryOptions())),
    };
  },
});

function Home() {
  const { data: posts } = useSuspenseQuery(postsQueryOptions());
  const { tagsPromise } = Route.useLoaderData();

  return (
    <div className="p-2">
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (<li key={post.id}>{post.title}</li>))}
      </ul>
      <h1>Tags</h1>
      <Suspense fallback={<div>Loading tags...</div>}>
        <Await promise={tagsPromise}>{(data) => data.join(', ')}</Await>
      </Suspense>
    </div>
  );
}

It appears to work however I noticed that