Feature Request: True full stack component in remix

[devnomic]

It would be awesome if we could have full stack component without explicitly using useFetcher to simulate load and submit form.

// routes/posts.$id.star-button.tsx

export async function loader({ params }) {
  const count = await getStarCount(params.id); // get star count from db
  return { count };
}

export async function action({ request }) {
  // update db
}

// add flag to tell this component is full stack
// and going to be imported in other component instead being used as outlet page
export const isResourceComponent = true;

export default function StarButton() {
  const { count } = useLoaderData<typeof loader>();
  return (
    <Form method="post">
      <button>Count: {count}</button>
    </Form>
  );
}

Then i can include this StarButton component inside the main page.

// routes/posts.$id.tsx

export async function loader({ params }) {
  const post = await getPost(params?.id); // get post from db
  return { post };
}

export default function Page() {
  const { post } = useLoaderData<typeof loader>();
  return (
      <div>
        <StarButton />
        <h1> {post.title} </h1>
     </div>
  );
}

If i am using @kiliman flat routes package the colocation advantage would be amazing as the route would be

routes/posts.$id+/index.tsx
routes/posts.$id+/star-button.tsx

As this enable us to group the page with it's own components with the component that has it's own loader and action.

But i wish in the official remix could also be like

routes/posts.$id/route.tsx
routes/posts.$id/star-button.tsx

[kiliman]

I believe the plan is that RSC/Server Actions support will take care of loading/saving data at the component level.

[devnomic]

How is it going to be look like? Is it like this?

export function loader({ params }) {
   const post = await getPost(params?.id); // get post from db
   return {
      StarButton: <StarButton />, // import star button from other file with its own loader and action
      post,
   }
}

export default function MainPage() {
 const { post, StarButton } = useLoaderData<typeof loader>();
  return (
      <div>
        {StarButton}
        <h1> {post.title} </h1>
     </div>
  );
}

[sergiodxa]

From what the team show so far, yes, a route will still have a loader (a great place to optimize data fetching) and then it can return either data or JSX, if you return JSX that component will be a server component and you can later render it on the UI

This also means that instead of routes being server first they will be client first and you will render server components inside from the loader data, contrarian to other frameworks where the page/route is a server component by default and you opt into client components.

Also you would still need to opt into client components for components rendered by your server components (the ones you return from a loader)

---

Note this is based on what the team shown at the React Conf, Discord and X so far, it's possible this may change in the future.