React-在渲染之前获取数据（最佳解决方案）

Question

So, I have an app that user can choose several settings in. Like number format or a currency that will be displayed by default.

For that there is a special API endpoint /settings that I get the values from.

The whole app is rendered on the server side when the user reloads the page. I fire the settings fetch as soon as possible (in the componentWillMount of the top level component), but there is sometimes a blink/ delay.

Possible solutions:

1. First solution is to fetch the settings when the user loads the app for the first time, and save it in the localStorage if it's available. Downside is that the numbers/ currencies still can be different than those in the settings when the app is loaded for the first time.

2. Second solution would be to fetch the data before the application is rendered on the server side, and inject this data somewhere into script tag (like a window.userSettings = { ...settings } ). It might extend the reload loading time a bit, but the settings will be as the user set them.

Is there any other solution to such a problem? What is the best way to do it?

Answer 1

I hope, this solution may help you.

step 1 : Perform API call in componentWillMount and also, check for error. Assign two state one for currencies and one for error , if possible another one for loading Step 2 : Assign localStorage using your state in componnetDidMount Step 3 : Then, under your render method, check for both error state and localStorage

Sample snippet in given below

class App extends Component{

  custructor(props){
    super(props);
    this.state={
      currency_number: '',
      error: false
    }
  }

  componentWillMount(){
    //perform fetch api and assign the state with the received items
    // check for error, if so then setState({error: true})
  }

  ComponentDidMount(){
    localStorage.setItem('currency', JSON.stringify(this.state.currency_number))
  }

  render(){
    const currency =  JSON.parse(localStorage.getItem('currency'))
    if (this.state.error) {
      return(
        <div>
          { currency }
        </div>

      )
    }
  }
}

Answer 2

I don't know if this can help you but you can render something else while the data is being fetched to make the user wait when there is a delay or to avoid the blinking effect. I am using loaders that I have found there