【Feature Request】Server Function

[x1ny]

As React is working on server-side components for do some server-side work in the front-end project,I thinking of implementing isomorphic application in remix framework.In remix, we can write api route and call it in client code.But this method is not easy enough, especially when you have more and more apis,this will require significant maintenance costs.To make the project more structured, we usually put logically related files in the same folder on a page by page basis.So I want to implement a special file type called "Server Function", this js module export a function,when remix building, this function will automatically generate an API route.In client code,we can call this function directly, and SWC/Babel will convert it to calling API route.

[kiliman]

Can you provide an example? I’m not sure what you’re asking for here. Thanks!

[sergiodxa]

What I understood is something like Blitz.js, you export a function like

export async function randomFunction() {
  return json(data)
}

Then, import that in a component

import { randomFunction } from "~/the/path/of/that/function"

And when you do randomFunction() call an API that will run the function.

But I'm not sure how that will be useful with the Remix model of doing the fetch at the route level instead of the component level.

[x1ny]

What I need is something like:

../../some_page/fetch_some_data.server_function.js

// this is a function that will be run on the server
export default async function(params) {

    ... // some code to fetch data from database

    return data
}

../../some_page/index.jsx

import fetch_some_data from './fetch_some_data.server_function.js'

// this is a page
export default function() {

   const params = {...}

    return (
       <button
           onClick={() => {
              fetch_some_data(params)
                  .then(data => {
                       console.log(data)
                   })
           }}
       >
           fetch data
       </button>
    )
}

When you are coding, It's like a simple function call, so you can easily execute some code on the server, and it is easier to maintain your code.Especially when you use typescript, you will get type hints to improve development efficiency.

At compile time, "fetch_some_data.server_function.js" will be converted to an api route, and the client code will also be converted to look like this:

../../some_page/index.jsx

// this is a page
export default function() {

   const params = {...}

    return (
       <button
           onClick={() => {
              fetch('/api/xxxxxx', {
                  method: 'post',
                  headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/json'
                  },
                  body: JSON.stringify(params)
              })
                .then(data => {
                  console.log(data)
                })
           }}
       >
           fetch data
       </button>
    )
}

[sergiodxa]

Yeah like Blitz.js then, you can’t get something quite similar by creating an actual route file with a loader or action and using the useFetcher hook to call it.

I would recommend you against that though, use a Form of fetcher.Form whenever you can, they make the UI code way easier, what you describe makes more sense on a client side heavy framework where most interaction needs JS to work, Remix gives you the tools to leave that and make your app more resilient by not relying to JS for things the browser does (like a form to submit data) while using JS to enhance the UX