SSR and loading indicators - I don't get it

Guess I'm missing something here, but unfortunately I'm having a hard time with the docs: in https://trpc.io/docs/v10/nextjs the example utils/trcp.ts sets ssr: true, but the pages/index.tsx example uses

  const hello = trpc.hello.useQuery({ text: 'client' });
  if (!hello.data) {
    return <div>Loading...</div>;
  }

Since SSR would prevent the page from being rendered until the queries are done, how would this loading indicator ever been shown?

Only first page load in next js is ssr. If you navigate to page that has this component it will show loading