Question: Which universal http library would you use?

[BeneStem]

Hey there, as this library is standing out regarding performance I wanted to ask which library I should use for universal http fetching.

I know axios but I am not sure if its the best/fastest option out there.

I only want to be able to get the data within node and within browser :)

[ryansolid]

I moved this to discussions since it seems the right sort of question. Honestly it's a trade off between features and size I think. Raw requests are pretty much constrained by underly native mechanisms being used. You will see me and most authors in demos do simple stuff like fetch even node-fetch simply to keep client bundle sizes down and we aren't concerned with features. I used to use superagent 8 years ago.. and axios seems the latest of that sort. But I think this deserves a wider community response since as I said you probably won't see me doing much outside of fetch.

An interesting question is with the dawn of query libraries like React Query, RTK Query, SWR in the React ecosystem will we see less use of things like axios as they do the complex lifting and see people use very simple fetch or graphql clients. Obviously there are things like Apollo on the GraphQL side etc that provide this full-service side of things but I wonder if they are slightly on the outs.

I almost want to see if https://github.com/lukeed has made a request client since I'm pretty sure it would be what I'd be looking for. His stuff is small, fast, and reasonably flexible. And my go to when I need small utilities.

[BeneStem]

Ahh I didnt know "discussions" yet... Sorry! Thank you very much!

[BeneStem]

I am actually using https://github.com/reactiverse/es4x as a server backend instead of express or fastify because it is insanely fast and efficient...
I noticed that it includes a web-client as well. So i'll be probably using fetch in the browser and somehow need to find a way to make it use the es4x-web-client in ssr build.

When I make some progress I'll leave a message here so that others can make use of it :)

[ryansolid]

Sounds good. I took you to mean only the request side of the equation. Like in the browser, or on the server because you are doing SSR connecting to separate APIs.

[BeneStem]

Yeah I am actually doing that exactly as you understood. The web-client is sth like axios but from that es4x-framework. Its a java/vertx thing ;)

Also I am thinking about using the db connection directly in the ssr scenario to skip the request part... But not sure how this could work yet...

Thank you for all your fast replies!

[ryansolid]

There is a isServer you can import from solid-js/web. If everything is set up right for SSR it should be able to treeshake/dead code eliminate the unnecessary code from either side of the condition.

[BeneStem]

Great, thank you! That sounds like a way worth exploring.

[amoutonbrady]

I'd recommend redaxios: https://github.com/developit/redaxios. It's made and maintain by the Preact core developer, has similar API as axios and is just a thin wrapper around native fetch which you can't go higher in term of performances.

If it's too limited in term of features, I'd highly recommend ky by Sindre Shorus, a well known OSS developer. https://github.com/sindresorhus/ky.

[BeneStem]

Thank you! Looks very interesting.

[BeneStem]

@amoutonbrady I'd still need sth like node-fetch as a polyfill for fetch to use it on server-side, if I am not mistaken?

[amoutonbrady]

Ky has a universal package that can bridge that gap, though I haven't used it myself. I usually either pick Ky for the client or Got for the server.

As per redaxios, they have a way to pass the instance fetch you want : https://github.com/developit/redaxios/blob/master/src/index.js#L31

[BeneStem]

If you are interested, I was able to make an example run using fetch on the client side and using a database connection when server side rendering...
The hint regarding isServer was exactly right!

You can find the full example here: https://gitlab.com/BeneStem/es4x-flower
And the part where I am fetching the data here: https://gitlab.com/BeneStem/es4x-flower/-/blob/master/src/client/page/Products.tsx#L12

If you have any time to give me feedback or some hints would be great.

Maybe we can use this "starter"-like example project somewhere to make it easier for ppl to start with solid...

Anyways, great work, I love this framework!

[BeneStem]

In addition what is probably interesting about my example project is that I am not using express or fastify but a very very very fast es4x server. Which is a java vert.x server using graaljs polyglot compilation to run the node scripts.

Here are some benchmarks:
https://www.techempower.com/benchmarks/#section=data-r20&hw=ph&test=fortune&l=zik0sf-sd

If you aim for a fast framework this is maybe also a nice hint in the README or sth. I dunno, just if you like :)
But you'd need to install java along side node 😱
In production only java jre is needed. You'd not even need node anymore...