I have simple component (not page, it is separate self-sufficient component) which can be used for both authenticated and anonymous users. Products loading for some time (actually it loads subscriptions, plans, etc) and makes entire page load time awful. I am following recommendation from documentation https://remix.run/docs/en/main/guides/streaming and basically just not works.

First of all vite analyser shows error

'~/services/auth.server' imported by 'app/components/Landing/Products.tsx'

Of course it does as it uses on the server side to get user and load stuff from DB.

Here is simplified code I am using to fetch data for component and which doesn’t work.

import { auth } from "~/services/auth.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  console.log("
 loader started", new Date());

  const user = await auth.isAuthenticated(request);

  const products = collections.products.findMany({ userId: user._id });

  return defer({ products })
}remix


export default function Products() {
  const { products } = useLoaderData<typeof loader>();

  return (
      <div className="container">
        <Suspense fallback={<div> LOADING PRODUCTS...</div>}>
          <Await resolve={products}>
            { (products) => <Product product={product) /> }
          </Await>
        </Suspense>
      </div>
  );
}

How to implement data streaming in isolated component correctly?