1. Background

Modern.js already supports Data Loader to fetch data now, but it does not provide a way to write data to the server side. Although developers can also send data to the server side through web fetch or request libraries. However, when using web fetch, the data in Data Loader is not updated, resulting in the current usage of developers as follows:

It can be seen that the entire flow is not clear enough. It will increase the developer's mental burden and project complexity. When we have "data action", the whole data flow will become clearer:

2. Detailed Design

Each routing file can have a .data.ts file. In the .data.ts file, a function named loader or action can be exported. The loader handles data fetching and the action function handles data writing. we will still keep the .loader.ts file convention, but the .data.ts file will have a higher priority.

export const loader = async() => {};
export const action = async ({ request }) => {
 let formData = await request.formData();
 return updateUser(params.songId, formData);
}

The input parameters of the action function and the loader function are the same. When the action function is executed, the execution of the loader function is always triggered to update the data.

Developers can utilize the APIs provided by react-router, such as useFetcher and useSubmit, to submit data and trigger actions. The main difference between these two APIs is whether navigation will be triggered after data is submitted.

For applications requiring rich interaction, we recommend using useFetcher. For content websites and other scenarios that require navigation(such as search), we suggest using useFetcher and Form. This way, when users use the browser's forward or backward buttons, they will have a better experience.

Like the loader function, in CSR, the action function is always executed on the client side, and in SSR, the action function will be executed on the server.

In CSR

graph LR
 submit --> action
 action --> loader
 loader --> render

In SSR

graph LR
 submit("submit") --> req("req")
 req --> action("action(server)")
 action --> browser("browser")
 browser --> loader_req("loader req")
 loader_req --> loader("loader(server)")
 loader --> render

3. Drawbacks

There are some challenges to developer habits. so we will continue to observe the use of developers, and any suggestions and feedback are welcome.