I've complained about meta-frameworks in the past, specifically in regards to file-system routing. But I want to explore another use case specific to my ideas for a "Widget" Site..
If I wanted to have a component, say <Customer>, and a route /customer, and I wanted both to be able to accept an id, like <Customer id={1}> and /customer/1, how could I achieve this in one definition? It seems like a simple ask, right? There are still many questions to ask. If this component is rendered on the client, should it fetch an endpoint /api/customer.json?id=1? If it were to be rendered on the server, can it not make that call? I was just exploring the idea behind "Full Stack Components" from Kent C. Dodds and I'm not quite sure it has the versatility I'm looking for. The complexity for me comes when you need a component to know about a static resource url. Normally with file system routing, this isn't really necessary. An exported function runs server-side, like Next.js's getServerSideProps or Remix's loader for that route, and renders the markup.
The things I'm looking for in a route/component definition are the following:
- The component endpoints for loading data and input actions should be publicly exposed.
- The component itself should be internally reusable the same way you'd use it in a request.
- The component should be able to be used on the front-end and make a fetch call if desired.
Currently, it seems that most meta-frameworks do maybe one of these things.
Top comments (3)
Rakkas has 2 and 3 if I understand correctly, data fetching is component based, not route based (
useServerSideQuery). 1 is technically possible now but it will be usable once we have a way to set a custom URL path foruseSSQ.Hey @cyco130 coincidentally I was looking deeper into Rakkas and comparing it with Remix a bunch. I think I need a bit of a rosetta stone as to the differences you see with Rakkas compared to the rest of the landscape.
Thank you for the blog post idea :)
The summary is: In Next and Remix, data fetching is tied to routes. Only routes can have
getServerSidePropsorloader.In Rakkas, any component can have one or more
useServerSideQuery. The callback function you pass to it always runs on the server. For the client build, it's compiled into afetchcall. Apart from that, the API is similar toreact-query. There's alsouseServerSideMutationanduseFormMutation(not yet documented). This way, a component can contain its own backend. True "fullstack components", not fullstack routes.So you can have, say, a
LoginFormcomponent (not a route, just a component) that contains all the backend logic and view logic pertaining to logging the user in in one place. And you can use it in as many places as you want in your app.