diff --git a/text/0000-ssrReconciliation.md b/text/0000-ssrReconciliation.md new file mode 100644 index 00000000..4219c248 --- /dev/null +++ b/text/0000-ssrReconciliation.md @@ -0,0 +1,96 @@ +- Start Date: 2018-05-9 +- RFC PR: +- React Issue: + +# Summary + +Give the developer a chance to `intentially` patch up the mismatches during hydration. + +# Basic example + +```jsx + +constructor(props) { + super(props) + + this.styles = Object.defineProperties({}, { + 'container': { get: _=> { + return typeof window == 'undefined' + ? { height: 300 } + : { height: this.props.viewsize.height * 0.67} + }} + }) +} + +render() { + let s = this.styles + return
+} + + +``` + +# Motivation + +React expects that the rendered content is identical between the server and the client. This is important for performance reasons. 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/issues/8017#issuecomment-256351955](https://github.com/facebook/react/issues/8017#issuecomment-256351955) + + +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: + +```jsx +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 ( +