How to make only one API request when using React SSR?

Question

My application has to make an API call, that returns an array of items that gets styled and rendered to the screen. To make my SSR rendering work, I have to make the API request on server of course, but when using the SSR you also have to rerender (using ReactDOM.hydrate) on the client and I'm making the 2nd API request in here.

Since the API request takes more than 2 seconds, doing it 2 times is so inefficient. Is there a workaround around that by only doing 1 request and someway using the data on both server and client?

Tomasz Mularczyk · Accepted Answer · 2018-03-21 16:48:53Z

2

This is how you fetch data on a server and reuse it on client - straight from the redux documentation. If you are not using redux you will need to implement something very similar.

To answer the latter question - how to avoid making another request on the client? You just need to check if the data is there :)

componentDidMount() {
  if(!this.props.isDataFetched) {
    this.props.fetchData();
  }
}

or maybe...

componentDidMount() {
  if(this.props.data.length === 0) {
    this.props.fetchData();
  }
}

answered Mar 21, 2018 at 16:48

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philip Fabianek Over a year ago

Thanks for the answer, I am not using Redux for my application and I won't even have to. As I noticed, they just save the data to the window which I've encountered before and since the data doesn't need to have any security at all, it is a fine option for me.

Collectives™ on Stack Overflow

How to make only one API request when using React SSR?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related