Is it possible to use a loader inside of a child comp?

[tajbowness]

Hello, I'm trying to use a loader inside of a child but I get this prompt when I try to,

[vite] Internal server error: Server-only module referenced by client

'../utils.server/getUser.server' imported by 'app/large_components/AccountInfo.jsx'

See https://remix.run/docs/en/main/guides/vite#splitting-up-client-and-server-code

AccountInfo.jsx

import React from "react";
import { useLoaderData } from "@remix-run/react";
import { getUser } from "../utils.server/getUser.server";

export const loader = async ({ request }) => {
  const metaData = await getUser(request);

  return metaData
}

export default function AccountInfo(props) {
  const { metaData } = useLoaderData();
  console.log(metaData)

  return (<>...</>)

}

Implementing the code exactly into the route / parent, the issue doesn't occur. So I was wondering if loaders can't be used inside of a child component?

In my use case, if this isn't possible I'd just use an action loader and pass the info to the child, but I feel like this would be more efficient and less code.

[sergiodxa]

Loaders are tied to routes, it's not possible to put a loader in that's not a route.

[tajbowness]

Makes sense, thank you!

[azc-wm]

You can use the fullstack component pattern. Kent has an article about it https://www.epicweb.dev/full-stack-components.

[tajbowness]

Perfect, thanks!