Server-side rendering with Node/React. How do I fetch the data?

Question

My goal is to server-side render my blog built with Node and React/Redux. I am following this tutorial, and using this project as an example.

I have loaded my components, created an empty store, successfully used this stuff to render and return html pages.

My remaining challenge is to figure out how to fetch the inital data so that I could put it into the store. I am assuming, I somehow need to tell the store(on the backend) to dispatch the actions that will fill it with data.

This example is using this function, that seems to be telling the store to dispatch actions, and returns the store filled with data(?). But it flies way over my head, I don't get how it works, and when I copy the code, the store still returns empty.

Can you help me to understand how this is supposed to work? What do I need to do to tell the store to execute actions, that will go to my API, fetch data, and put it into the store?

Answer 1

basically fetchComponentData will dispatch actions while server rendering, like the document says

fetchComponentData collects all the needs (need is an array of actions that are required to be dispatched before rendering the component) of components in the current route.

where need is an array of functions that return a redux action, which defined inside each smart components (connected with redux store and react-router)

for example, in mern-starter , when you visit index route , it'll render this component and there is the need method which will be executed by fetchComponentData when server rendering.