fetchData and server-side rendering

[gbezyuk]

Basing on provided setup, I created two nested routes and components: App and Page. Both of them have fetchData method producing promises for dispatched LOAD actions for API calls. There are three actions: two in App, one in Page component. First two does not require any information from router, the last one depends on a page_slug provided. And, in general, everything works just fine.

But, surprisingly, only first two API calls are being made on server side. The last one works only when the page is loaded into browser: thus, no server-side rendering occurs. I tried to move all three actions into single App component's fetchData method, and it did not help.

I would really appreciate any help on this issue.

Full project is located at https://github.com/gbezyuk/django-react-redux-universal-hot-example

[erikras]

And you're certain that arePagesLoaded(store.getState()) and areCategoriesLoaded(store.getState())) are both returning false? i.e. there are two promises in the array passed to Promise.all()?

[erikras]

I'd also put a console.log(routerParams.page_slug) in Page.js.

[gbezyuk]

arePagesLoaded and areCategoriesLoaded both return false, and the slug is correct. The troublesome one is loadPage, not the general methods.

[erikras]

I'm guessing it's pages.js:17.

promise: (client) => client.get(`/pages/${slug}.json`)

should be

promise: (client) => client.get(`/api/pages/${slug}.json`)

categories.js has the same problem.

[erikras]

No, nevermind. None of them should have /api.

[erikras]

Because ApiClient adds that only in the browser.

[gbezyuk]

Actually, after adding /api/ it worked! Looks like it failed while rendered on server. Thanks for the idea and for your attention to the issue in general!

[erikras]

👍