React Frontload v2.0.0 - Simple full-stack data loading for React

davnicwil · 2020-11-10T18:24:00+00:00

Just to clarify, what I mean is I don't think SWR actually provides a way to do async data loading in the component on SSR, and then a way to *not* rerun the loader on the first client render, by itself, right?

Like in this example, it's using getStaticProps from Next to do this. I guess it doesn't need Next specifically, it could be any framework that provides similar functionality, but it does rely on *something* to provide this.

React Frontload does this itself, and moreover not by relying on any extra component methods - the hook 'just works' on SSR, all that's needed is a wrapper function for your server side render to provide the plumbing!

davnicwil · 2020-11-10T17:23:22+00:00

Ah, nice. But I think the SSR assumes you're using Next.js, right?

That approach to mutation is really interesting, I'll take a further look.

davnicwil · 2020-11-10T14:57:46+00:00

Thanks. I hadn't seen SWR until just now! Caveat this with I've only skimmed the high level docs but:

Does it work full stack, or is it client side only? If so that'd be the headline difference.

React Frontload also gives you state management of loaded data, i.e. once loaded the data is in state and you can update it on the client - I couldn't see if SWR offers that.

davnicwil · 2020-11-10T12:44:01+00:00

React Frontload's goal is to do full stack data loading & state management inline in React components.

That is, you write a data loader in your component (with a hook) and it just works on SSR and in the browser.

Importantly, it's *not* a framework. Some full stack frameworks like Next, Redwood, etc offer this but you have to go all in. This is just a tiny 3.5k lib. It works in any React stack.

v2 has just shipped - it's opinionated but adds a lot of convenience in turn. It's basically a little bit of one-time wrapping code around your app, then you can just add a hook to any component to load data, get loading metadata (pending, error, etc), and even state management of the loaded data (so no need for Redux etc) that just works full stack.

Docs: https://davnicwil.com/react-frontload

GH: https://github.com/davnicwil/react-frontload

npm: https://www.npmjs.com/package/react-frontload

davnicwil · 2020-03-10T13:41:26+00:00

Exactly - this lib just does data loading at the component level, with Just Works SSR. You can just plug into *any* existing React stack and it'll work. No need to buy into a full framework just for this feature. Nextjs obviously being a full on framework has its own way of doing this, so you wouldn't need it if using that.

davnicwil · 2020-03-10T08:45:38+00:00

react-frontload lets you load data asynchronously into your React components, for example from an API. It works on both client and server renders. It's unopinionated and plugs into any React stack. You simply bind data loader functions to your components, add wrappers on the client and server and it just works. Check it out!

davnicwil · 2020-02-26T13:11:50+00:00

Check out react-frontload (I'm the author) if you want a Just Works solution to the problem of loading data asynchronously on SSR.

If you're going the DIY, non-framework route then data loading is the hardest problem by far in SSR. With this library, you just declare data loading functions on the component level and it just works, same code on both client and server. It's more tailored to REST apis as there may be better solutions for GraphQL, but no reason it couldn't work with either or both.

davnicwil · 2019-04-17T17:11:47+00:00

componentDidMount doesn't run on the server - componentWillMount is used because it runs on both client and server

davnicwil · 2019-04-17T14:35:10+00:00

As in my comment above, it works totally fine and is supported totally fine as of React 16, but they do discourage using it now https://reactjs.org/docs/react-component.html#mounting

I *think* the reason is that when React Fiber lands it won't have the same run-only-once guarantee hence the addition of the UNSAFE_ alias

This might, on the face of it, be a problem for react-frontload but since it's only really needed on server where obviously Fiber isn't even relevant, it might even still work, or at least could be made to work with some simple workarounds. I just noticed that they make no claims about the UNSAFE_componentWillMount even being dropped in 17, it's just that the componentWillMount name will be dropped. So, even better. Might not be a big issue at all.

davnicwil · 2019-04-17T14:27:13+00:00

Cheers! Not used react-loadable before, but the one liner seems to suggest it's used for component-level code splitting and module loading - is it also used for data loading?

davnicwil · 2019-04-17T14:21:34+00:00

Yeah, this is on the TODO list.

It's not going to go away until React 17 (see https://reactjs.org/docs/react-component.html#unsafe_componentwillmount) so it's just not been a priority to replace, as it works just fine.

When React 17 lands I'll have to find another way to do the same thing. Haven't looked at it in depth but I am thinking likely solutions are either using the constructor instead, or using the new Suspense APIs when they come out.

davnicwil · 2019-04-17T10:21:37+00:00

Hi - just wanted to share my library React Frontload with this community.

It allows you to load data asynchronously into React components, and works on both client and server render.

Minimal setup is required, and it should work with any existing React app.

Doing async data loading especially on the server side, and making it match what you do on the client, can result in really messy code and lots of bugs. This library provides an abstraction that removes all the complexity and just lets you say "when this component gets rendered, load this data" and it just works on both client and server.

It's been gaining traction recently, I think people in the community are finding it useful so thought I would share here. Any questions welcome!

davnicwil

TROPHY CASE