mhart / react-server-example Goto Github PK

safeStringify in react 16 hydrate produces errors like this
Warning: Text content did not match. Server: "</script>fasdfsfsf </script> " Client: "</script>fasdfsfsf </script>"

This message while starting the server, it works but:

Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

When you disable javascript in google chrome this example does not work. The whole point of mutual server/client rendering is to get rid of dependency on javascript libraries loading. Any thoughts?

I use pretty strict CSP on some security focused sites I work on. This prevents me from using inline scripts and eval. Is there an elegant way to get APP_PROPS passed to bundle.js on the frontend without putting inline on the page? Thank you.

Hi, Michael
Did you verify that componentDidMount did get called when hitting localhost:3000/ ?
From react document, https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount, it looks like it's not invoked on server side.

I was thinking about how we can integrate with other Js frameworks if we do server side react.

This line causes an JSON parse error because \! is not a valid character in JSON.

https://github.com/yahoo/serialize-javascript has a nice implementation for safely stringifying JSON for HTML.

Hey,

Thank you so much for this example, it is extremely helpful.
Is there a way to achieve the same result using JSX?

Thanks in advance,
Tomer

In this example, component receive data while we doing server render, and in browser, component is rendered with "inline" data.

  '<script>' +
    'var MyApp = React.createFactory(require("myApp"));' +
    'React.render(MyApp(' + safeStringify(props) + '), document.getElementById("content"))' +
  '</script>'

but in real world, i can't wirte a bunch of data in my html or js file. How should i do browser data passing?

send a ajax request and render component after response? this makes server deal with 2 times data-query

get data from server-rendered html?