What I wish remix could be

[SteveSuv]

suggestions

1. Allow loaders and actions to be used in components but not only in routers

// app/components/SearchBar.tsx

export const loader = async () => {};

export const action = async () => {};

export const SearchBar = () => UI;

2. A page or component allows multiple loaders and multiple actions

const loader1 = async () => {};
const loader2 = async () => {};

const action1 = async () => {};
const action2 = async () => {};

const SearchBar = () => {
  const loaderData1 = useLoaderData(loader1);
  const loaderData2 = useLoaderData(loader2);

  const actionData1 = useActionData(action1);
  const actionData2 = useActionData(action2);

  return (
    <div>
      <Form action={action1}>...</Form>
      ...
      <Form action={action2}>...</Form>
    </div>
  );
};

3. It would be better if loader and action can be defined directly in the component but not used by hooks

const SearchBar = async () => {
  // loader can be GET or POST
  const loader1 = async () => {};
  const loader2 = async () => {};

  // action can only be void, like nextjs server-action
  const action1 = async () => {};
  const action2 = async () => {};

  const loaderData1 = await loader1();
  const loaderData2 = await loader2();

  return (
    <div>
      <Form action={action1}>...</Form>
      ...
      <Form action={action2}>...</Form>
    </div>
  );
};

4. formData.getAll() should be a json and with types

export const action = ({ request }: ActionArgs) => {
  const formData = await request.formData();
  const jsonData = formData.getAll();
  // {input1:"comedy",input2:"music",input3:"howto"}
  // with types
};

<Form method="post">
  <p>Select the categories for this video:</p>
  <input name="input1" value="comedy" />
  <input name="input2" value="music" />
  <input name="input3" value="howto" />
</Form>;

5. Optimize the documentation, many APIs in the documentation need to jump to react-router for viewing, which is not friendly to new users who only want to use remix but not react-router

> This hook is simply a re-export of React Router's something.

6. Improve ecological quality, such as internationalization, authentication, theme switching, etc, compared with next-i18n, next-auth, next-theme...

7. Don't split remix into multiple npm packages, this will reduce branding and affect remix's total downloads display on npm. Only use the remix package. When imported into a component, it can be from "remix/node" or from "remix/react" etc.

summary

Why I stopped using nextjs and switched to remix:

After nextjs13 appdir comes out, it is divided into server component and client component. They have two different sets of rules and writing. The server component cannot listen to events, cannot use react hooks, etc. The client component cannot use asynchronous components, server-action, etc. The server component can wrap the client component, but the client component cannot wrap the server component. In actual projects, I have to constantly consider how to split or how to nest components. At the same time, the routing rules, writing rules, and APIs of nextjs13 are also increasing, which greatly increases the mental burden of developers. The current DX is very poor.

There should be many developers who agree with me, and they should also be looking for a framework to replace the poor development experience of nextjs at this stage, so I think this period is the most advantageous for remix. But remix also has some poor developer experience, such as the points I mentioned above, if it can be improved, it will bring a huge number of new users to remix.

[cliffordfajardo]

formData.getAll() should be a json and with types

Having formData.getAll() return json might be confusing since its a standard web API in browser & server land
The ability to send json from a fetcher was added a few months ago here though 🎉 remix-run/react-router#10324

It would be better if loader and action can be defined directly in the component but not used by hooks

The closest thing I've seen about this is @kentcdodds 's video showing "Fullstack components" where he shows how you can can colocate your loader, action and React component in the same file. (Article "Fullstack components")

I believe remix team is working on an API that would allow you to call your data fetching functions inside your component and not need to use userLoaderData in the future with RSC

@sergiodxa - do you know if RSC would facilitate this?
Kind of reminds me of this tweet: https://twitter.com/JLarky/status/1681393060226416641

[arielvieira]

Nice suggestions here are my two cents on top on those

1. Allow loaders and actions to be used in components but not only in routers

• I agree, but I think this will be only possible after RSC support.

2. A page or component allows multiple loaders and multiple actions
3. It would be better if loader and action can be defined directly in the component but not used by hooks

• I don't see that happening any time soon without RSC or a compiler because if you declare or use your server-side code inside your component it will leak to the browser and have really dangerous issue like security and also increased bundle size. The only way around this currently is with RSC and server actions(that's a react feature) and I believe will have the same issues that nextjs have, another way would to solve this could be via a compiler like qwik does but I'm sure that won't happen

4. formData.getAll() should be a JSON and with types

• Remix is built upon the web primitives and formData is one of them https://developer.mozilla.org/en-US/docs/Web/API/FormData so I don't remix patching the formData since you can easily get that json data like this

const jsonData = Object.fromEntries(formData.entries)

5. Optimize the documentation, many APIs in the documentation need to jump to react-router for viewing, which is not friendly to new users who only want to use remix but not react-router

• Definitely, Remix docs is so annoying and hard to navigate, and this back and forth between react-router and remix only make it worse

6 Improve ecological quality, such as internationalization, authentication, theme switching, etc, compared with next-i18n, next-auth, next-theme...

• I think this is more related to remix ecosystem then remix it self, someone had to built next-auth, next-themes etc. We need more people building those kind of thing for remix as well

7. Don't split remix into multiple npm packages, this will reduce branding and affect remix's total downloads display on npm. Only use the remix package. When imported into a component, it can be from "remix/node" or from "remix/react" etc.

• I kinda have mixed feeling about this