Why does "loader" execute on client side?

[r07r07]

While exploring the React Router example from https://github.com/remix-run/react-router/tree/main/examples/ssr-data-router, I encountered an unexpected behavior: the loader function is executing on the client side instead of the anticipated server side. This behavior is not ideal and may lead to security concerns.

Reproduce:

1. Download the example from https://github.com/remix-run/react-router/tree/main/examples/ssr-data-router
   and do some modification:
   1. add "type": "module" to package.json
   2. use import instead of require in server.js
   3. add the line console.log("Home Loader") into homeLoader function
2. Build and run:

$ npm run build
$ npm run start

After clicking the Home link, "Home Loader" is logged in the browser console. This indicates that the loader function is executing on the client side, which is unexpected and should be avoided. Ideally, the loader function and action function should be excluded from the client bundle.

The guide said:

Remix uses "tree shaking" to remove server code from browser bundles.

So it seems the loader function was not tree shaken off in this example.

How can I fix this?

[webfueler]

I am also using react-router lastest version with data router, and loaders only run server side on the first request. From that point on, loaders and actions run in client side. In Remix, this is not the case - a fetch call is made to the server, and loaders and actions always run server side.

I also checked the server bundle, and I see the loader and action functions there.

Is it possible to force data router to always use loaders and actions server side? If so, can we get an updated example or some directions on how to do it?