API, Prefetch SSR, Shared initial state

[kronthto]

The need to include data from like an API that needs to be fetched asynchronously in your App arises quite often, so I hope this example implementation will be useful for some people. In my personal experience, figuring out how to make it work with Redux and especially SSR can be hard in the beginning.

The general idea is to have the route-components define static methods that pre-configure the store by dispatching relevant actions (fetching the necessary data). The server waits for these to complete before calling renderToString.

The techniques used in this feature are inspired by the following resources:

• http://redux.js.org/docs/advanced/ExampleRedditAPI.html
• https://reacttraining.com/react-router/web/guides/server-rendering/data-loading
• https://blog.tableflip.io/server-side-rendering-with-react-and-redux/

[ayroblu]

Hmmm I made another repo on this if you want to see what I came up with. I'm planning on writing another article so I'll give that the fancy async stuff. I don't use redux thunk - can you sell me on it? I honestly find just setting loading states and stuff manually easier

I'm not using global routes matching cause that defeats the purpose of react router v4, (looks a lot like how next.js is implemented though)

[kronthto]

May I ask you to elaborate how this approach defeats the purpose of react-router v4? I can't quite compare it to older versions as I myself am relatively new to it and v4 is the first version I ever used. I read about using matchPath this way in the official docs page on Data Loading.

As for redux-thunk, it allows to dispatch functions in addition to plain actions, making it possible to move the fetch logic to the action creators. I consider this better than having it in the components/containers. There are alternatives, redux-saga could be used for this aswell I think (never tried it though), thunk was a suggestion provided by the redux docs on Async Flow.

I just took a look at ayroblu/ssr-cra-async, but am really not a fan of the context / component-state stuff, as it bypasses the idea of having the Redux-store as your global data store.

Anyways, I'm curious for your article on the async stuff and grateful for the current one (about this repo).

[ayroblu]

The redux store is still the global store? That doesn't really change anything. Oh, I guess I put stuff in the component state, I think I was just being lazy for proof of concept

So with a main switch routes, you can only handle top level pages, where you can put routes in sub components, so if your subcomponents have data they want to load, you have to define it all in your top level. Its really just a different style, but I find the second way to be more flexible so its my preferred. FYI, before v4, you pretty much had to do a route tree as you've done

[kronthto]

So with a main switch routes, you can only handle top level pages, where you can put routes in sub components, so if your subcomponents have data they want to load, you have to define it all in your top level. (...) FYI, before v4, you pretty much had to do a route tree as you've done

Thank you for explaining this, I now see the problem.

I was searching around a bit and found react-router-config as the solution the react-router team proposes. They do define a route tree, but it allows having nested/child-routes.