React + SSR: Prevent Client Side Rendering, If Component Rendered On Server

(Satish Lakhani) #1

Hi, I have built a site using React, React Router 4 and React Redux with Server Side Rendering feature.

I’m having a component which fetches data using api calls and displays it on the page. This component gets rendered on the server side and sends rendered HTML to the client. But on client side, it also gets rendered (fetches data again and renders again), which I want to prevent. Can anyone help me, how can i achieve this?

Satish Lakhani

(Anurag Sharma) #2

Is it a Dev mode issue or you’re facing this issue on production as well?

It might be a webpack configuration as well. If possible, please share the Webpack Dev / Prod config files.

(Satish Lakhani) #3

No its issue on both mode.

(Ajay Poshak) #4

To prevent client side re-rendering, you can use shouldComponentUpdate(), you can compare nextProps and this.props, and return true, if you want it to be re-rendered otherwise return false.
But this happens after your API call has been done and state has been updated.

To prevent client side API call after server side API call has been done, you can check if there is already data in your state, then don’t make that API call. I have assumed that you are making API call from componentDidMount(). But still I don’t feel that its right way to prevent client side API call.