React Context undefined in Server Side Render

user5183133

I am trying to pass in data during server side rendering for a simple app.

I have this data provider both in the server and client and I use a global variable to inject the initial state into the client:

import React, { Component } from 'react';

export default class SsrDataProvider extends Component {
  constructor(props) {
    super(props);
    this.state = { data: window.__INITIAL_STATE__ };
  }

  getChildContext() {
    return { data: this.state.data };
  }

  render() {
    return this.props.children;
  }
}

SsrDataProvider.propTypes = {
  children: React.PropTypes.object,
};

SsrDataProvider.childContextTypes = {
  data: React.PropTypes.object,
};

In the server, window.INITIAL_STATE gets replaced with the actual data passed in through a prop:

renderToString(<SsrDataProvider {...renderProps} data={data} />)

and the data provider renders the router context instead of children...

render() {
  return <RouterContext {...this.props} />;
}

The problem is that the context isn't defined during server rendering. It's like it was never passed in at all. Then when the javascript bundle arrives to the client it uses the window.INITIAL_STATE variable and picks up where the server left off. It works, but I might as well not do any server side rendering. Is there something I'm missing? or maybe renderToString() does not support context?

Paul S

You should be setting the initial state based off of props.data if it is defined.

Really though, you shouldn't even be including window.__INITIAL_STATE__ inside of the component. Instead, you should also be passing in the data prop wherever it is that you're rendering the <SsrDataProvider> on the client side.

export default class SsrDataProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data // || window.__INITIAL_STATE__
    }
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Render React JS server side using .net

From Dev

React-router unable to render on server side

From Dev

Server side react-router won't render my routes

From Dev

React server-side render or static index.html?

From Dev

How to render component in react server side with async data

From Dev

React Redux server render but client side fetch data

From Dev

react-router doesn't render components on server side

From Dev

Render undefined in react component?

From Java

React Context: TypeError: render is not a function

From Dev

React Context - Context and Child render are not updating

From Dev

How to use React.js to render server-side template on Sails.js?

From Dev

React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering

From Dev

Cannot access DOM with server-side render - react 0.14.1, react-dom 0.14.1 and react-router 1.0.0-rc3

From Dev

react server side rendering with client side routing

From Dev

react server side rendering with client side routing

From Dev

Render two items (images) side by side in a list view in react native

From Java

Access React Context outside of render function

From Dev

Meteor + React : Server side routes?

From Dev

React - server side component rendering

From Dev

React - server side component rendering

From Dev

React-Stormpath on server side

From Dev

req.body undefined on server side

From Dev

Post request returns undefined on the server side

From Dev

react-native: `this.state` is undefined in `render`

From Dev

React Render Called Twice, Props Undefined on Second

From Dev

Is it possible to server-side render jQuery with ReactJS.Net?

From Dev

How to programmatically render dustjs template server side in nodejs

From Dev

ReactJS - How to render iframe inner contents server-side, for SEO?

From Dev

Using server-side-render only for initial page load

Related Related

  1. 1

    Render React JS server side using .net

  2. 2

    React-router unable to render on server side

  3. 3

    Server side react-router won't render my routes

  4. 4

    React server-side render or static index.html?

  5. 5

    How to render component in react server side with async data

  6. 6

    React Redux server render but client side fetch data

  7. 7

    react-router doesn't render components on server side

  8. 8

    Render undefined in react component?

  9. 9

    React Context: TypeError: render is not a function

  10. 10

    React Context - Context and Child render are not updating

  11. 11

    How to use React.js to render server-side template on Sails.js?

  12. 12

    React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering

  13. 13

    Cannot access DOM with server-side render - react 0.14.1, react-dom 0.14.1 and react-router 1.0.0-rc3

  14. 14

    react server side rendering with client side routing

  15. 15

    react server side rendering with client side routing

  16. 16

    Render two items (images) side by side in a list view in react native

  17. 17

    Access React Context outside of render function

  18. 18

    Meteor + React : Server side routes?

  19. 19

    React - server side component rendering

  20. 20

    React - server side component rendering

  21. 21

    React-Stormpath on server side

  22. 22

    req.body undefined on server side

  23. 23

    Post request returns undefined on the server side

  24. 24

    react-native: `this.state` is undefined in `render`

  25. 25

    React Render Called Twice, Props Undefined on Second

  26. 26

    Is it possible to server-side render jQuery with ReactJS.Net?

  27. 27

    How to programmatically render dustjs template server side in nodejs

  28. 28

    ReactJS - How to render iframe inner contents server-side, for SEO?

  29. 29

    Using server-side-render only for initial page load

HotTag

Archive