I render on the server with redux and react-router. The state initializes the default. As I understand it, renderToString() does not make a request to api which I execute in componentDidMount() . Because of this, the server simply renders a component of loading, and not the list I need.

UPD: server.js code:

 const renderToString = reactDomServer.renderToString const match = reactRouter.match const RouterContext = reactRouter.RouterContext app.get('*', (req, res, next) => { const error = () => res.status(404).send('404') const htmlFilePath = path.join( __dirname, '../build', 'index.html' ) fs.readFile( htmlFilePath, 'utf8', (err, htmlData) => { if(err) { error() } else { match({ routes, location: req.url }, (err, redirect, ssrData) => { if(err) { error() } else if(redirect) { res.redirect(302, redirect.pathname + redirect.search) } else if(ssrData) { const store = createStore(rootReducer) const ReactApp = renderToString( react.createElement(Provider, {store}, react.createElement(RouterContext, ssrData) ) ) const preloadedState = store.getState() const storeServer = ` <script> window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')} </script> ` let RenderedApp = htmlData.replace('{{SSR}}', ReactApp).replace('{{storeScript}}', storeServer) res.status(200).send(RenderedApp) } else { error() } }) } }) });

component code on the client:

  class PostsWrapper extends Component { componentDidMount() { const { dispatch, page } = this.props dispatch(fetchPosts(page)) } render() { return ( <div> <Posts posts={this.props.posts}/> </div> ) } } function mapStateToProps (state) { return { page: state.page, posts: state.posts } } export default connect(mapStateToProps)(PostsWrapper)

fetchPosts() Makes a request to api. How can I make a request to the api on the server and get data for rendering on the server, if we allow for different components, the requests go to different url api. That is, for the Posts component, the request goes api to api.site.com/posts and for the User component the request will be api.site.com/user/id .

    1 answer 1

    componentDidMount () is called only on the client.

    You need to set immediately set the desired state on the server.

    • This is the question, I do not know how to get the status on the server. More precisely, I received the initial state on the server, but how do I render the URL during the render, make a request to the desired api and get the desired state? - DarkSir
    • @DarkSir I don't understand the problem. Do you have a condition in componentDidMount () ??? Drop the component into question - xFloooo
    • I figured out a bit, and I realized that on the server you need to immediately make a request to get the status. But I did not understand how to make a request to the necessary api. That is, how to determine which components to which api you need to make a request - DarkSir
    • @DarkSir Well, do a preload from the server and put it in the cache, and in the actions with the requests, see the cache, and if there is no data, load it with the api, and add it back to the cache ... - xFloooo