React-starter-kit: Question: Prefetch data only for specific component/route during Server-side rendering

[blz-ea]

Hello,
You have created a awesome starter kit with everything developer needs.
And I have a question.
I am using feature/react-intl branch and trying to figure out how to fetch data from API only for specific route during server-side rendering.
Right now I just dispatch an action in src/server.js ( await store.dispatch(setData()) ) and get what I almost need. That action will fire on every single page. But what I want is when we request e.g. /contact/:id that action will fire only when route is /contact/:id
We can parse route(req.path) in src/server.js, but is it a good practice? Is there any better solutions for this?

Thank you

[seberik]

Would it not work if you specify the routes data dependence in each route, more precisely in the action function? I have also looked at solutions using a library like Redial to specify the data dependence in components and have the server and client handle the resolution of the dependencies differently.

[langpavel]

We can parse route(req.path) in src/server.js, but is it a good practice? Is there any better solutions for this?

This is not needed, routes are parsed on server.

You can execute server only code anywhere in app.
You can prefetch data in action on server only by simply adding condition if (!process.env.BROWSER) ... (see tools/webpack.config.js line 188 and 303)

You have store accessible through context of in route handler (router action).

Your store will be populated if you await store.dispatch(...) in router..

[blz-ea]

@langpavel Thank you very much thats exactly what I needed. I ended up populating store in route handler

export default {
  path: '/post/:id',
  async action({ store }) {
    await store.dispatch(setData());
    return {
      title,
      component: <Layout><StyledPost title={title} /></Layout>,
    };
  },
};

That is unbelievably useful