Give a ssrReconciliation={true} attribute for the developer to ask React to patch up the rendered content if they are not identical between the server and the client

[benpptung]

Do you want to request a feature or report a bug?

feature

What is the current behavior?

React expects that the rendered content is identical between the server and the client. If you intentionally need to render something different on the server and the client, you have to do a two-pass rendering like facebook/react#8017 (comment)

If an attribute is derived from screen size, since we don't know the real screen size in the server side, we might do a 2 pass rendering like following:

constructor(props) {
  super(props)
  this.state = { hasMounted: false }
  
  this.styles = Object.defineProperties({}, {
    'container': { get: _=> {
       if (typeof window == 'undefined') return { height: 300 }
       let height = this.props.viewsize.height * 0.67
       return this.state.hasMounted ? { height } : { height: height - 1 }
    }}
  })
}

componentDidMount() {
    this.setState({ hasMounted: true })
}

render() {
  let s = this.styles
  return (
    <div  style={s['container']}>
  </div>
  )
}

In the above code, I demonstrate that I have to intentionally render a wrong height initially in the browser so I can update it in the second run, or the DOM will keep inconsistent with the vDOM.

This is because if the 2 renderings keep unchanged in vDOM, React won't update the DOM.

Drawbacks

1. Introduce unnecessary 2nd rendering

2. The component will do 2 pass rendering in every mounting even it is not after SSR.

What is the expected behavior?

Design a ssrReconciliation={true} attribute, or something like that, e.g. ssrPatchUp={true} for the developer to ask React to patch up if a single element's attribute or text content is unavoidably different between the server and the client when hydrating ( Only after SSR ).

And if it is lucky the rendered content is identical between the server and the client, it will do nothing.

[quantizor]

This is solvable via my RFC as well: #46

[gaearon]

Please file an RFC, don't create an issue. Thanks!