A mechanism to execute the loader (or action) function on the client

[davidbarratt]

I would like to create an application that fetches data during server-side rendering, but when the user transitions between pages the application calls the external API directly (reducing network latency).

For instance, given the example in the documentation:

export async function loader() {
  let res = await fetch("https://api.github.com/gists");
  return res.json();
}

export default function GistsRoute() {
  let gists = useLoaderData();
  return (
    <ul>
      {gists.map(gist => (
        <li>
          <a href={gist.html_url}>{gist.id}</a>
        </li>
      ))}
    </ul>
  );
}

There isn't a reason this loader couldn't be executed on the client. Indeed, the https://api.github.com/gists endpoint even includes the proper CORS headers to bypass the same-origin policy and allow the browser to read the response. I imagine an action function could also be used directly from the client when the API implements Implicit OAuth Flow. Having this ability would make it possible to speed up the application by removing the request to the Remix "proxy" server. If the most intractable problem with web apps is network latency and reliability, why wouldn't we take the most direct route possible accross that network?

I realize there is no way for Remix to intuitively know this though. How could it know that this function isn't making a fetch to an API that needs a server-only secret?

Therefore, similar to how Server Components have a concept of shared components, I propose that a similar concept is created for Remix. Perhaps we could use a @Shared() decorator to indicate (and opt-into) executing the loader/action on the client?

What do you think?

[sergiodxa]

This has been discussed on the issue #179 a long time ago, I think it would be better to track ideas and suggestions only there.