Already display component even when getInitialProps hasn't returned yet

[nickredmark]

Imagine you click on a <Link/> that leads to this page:

export default class extends React.Component {
  static async getInitialProps() {
    await new Promise(resolve => setTimeout(resolve, 5000)) // or any long operation
    return {}
  }
  render() {
    return <span>done</span>
  }
}

right now next.js just waits.
Wouldn't it be better to be able to show the component already, with a loading flag of some kind?

[christiannwamba]

@nmaro I have a related situation. Clicking <Link /> when the component makes a network request throws a network error but if the page is visited directly it doesn't throw the error but completes the request as expected:

export default class extends React.Component {
  static async getInitialProps() {
    const res = await axios.get('http://example.com/path/endpoint');
    return {data: res.data}
  }
  render() {
    return <span>{this.props.data.value}</span>
  }
}

The other thing though is that the network tab suggests something CORS related which seems weird because the request completes when not accessing via <Link />:

XMLHttpRequest cannot load http://example.com/path/endpoint. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

This is not the case if the page is not accessed with <Link />. Everything works as expected when the page is just visited directly.

Update

I was able to hack around this by detecting environment:

export default class extends React.Component {
    static async getInitialProps () {
    if(!process.browser) {
      // Only make request if not on client
      const res = await axios.get('http://example.com/path/endpoint')
      return {data: res.data}
    } else {
      // Load data from store
      return {data: JSON.parse(sessionStorage.getItem('bpl'))}
    }
  }

  componentDidMount () {
    // Put data in store
    sessionStorage.setItem('bpl', JSON.stringify(this.props.data))
  }

   // . . .
}

[nkzawa]

@nmaro You can do it by using componentDidMount.

export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = { done: false }
  }
  componentDidMount () {
    setTimeout(() => {
     this.setState({ done: true })
    }, 5000))
  }
  render() {
    return <span>{this.state.done ? 'done' : 'loading'}</span>
  }
}

@christiannwamba That is not a hack but something we expect. getInitialProps has to be isomorphic.

[christiannwamba]

Awesome. Thank you!

[nickredmark]

@nkzawa I'm sorry I gave a bad example, I don't think componentDidMount can solve what I mean.

What I mean is: imagine having a getInitialProps that takes a somewhat long time to load data. When you end on that page from the client (i.e. no server-rendering involved), next.js just hangs.

Or are you suggesting not to use getInitialProps to load data on the client, whenever the data takes a long time to fetch?

[nkzawa]

@nmaro I think you mean #238. We're exploring how to achieve it.

[nickredmark]

Yes, thanks

[luisrudge]

@christiannwamba your problem is that the endpoint you're using doesn't support CORS. It's not related to nextjs at all