Final Questions

In notebook:
FrontEndMasters React
Created at:
2016-06-21
Updated:
2016-06-21
Tags:
libraries React JavaScript
- is mixin worth using for state machine type of things?
you can use React.createClass and mixins will continue to work
- server side rendering?
Three elements. There isn’t an idiomatic way to do server-side rendering. People are still figuring it out and do it differently.
Three things you need to deal with:
  1. Getting data before you render (render is not async, you cannot wait for data arrive after you have your layout HTML) a.k.a. Hydrating
  2. Get the data to the client (the handoff)
  3. The client needs to render with that data (dehydrate the data)
Server renders the page and it has a checksum of the HTML. The client tries to render the page, but before it would change the DOM checks the checksum it has on it’s HTML with the one it got from the server. If they match, it doesn’t need to touch to DOM. This avoids the flashing of the page as the DOM is re-rendered. After it (the client) just deals with the events.

Some people render everything but the data. Then the client fetches the data. 
Demoes how it would look like.
Repo is the React Router Mega Demo
(https://github.com/ryanflorence/react-router-mega-demo)
  // **** app/index.html

<!doctype html public "restroom">
<meta charset="utf-8"/>
<title>React Router Mega Demo</title>
<link rel="stylesheet" href="/styles.css"/>
<body>

<div id="app">¡HTML!</div>

<script>
__DATA__ = ¡DATA!;
</script>

<script src="/js/main.js"></script>
Move to server.js
  // **** server.js ****

...

router.run((Handler, state) => {
    if (state.routes[0].name === 'not-found') {
      var html = React.renderToStaticMarkup(<Handler/>);
      cb({notFound: true}, html);
      return;
    }
    // fetches data first (in async, non blocking way)
    fetchData(token, state).then((data) => {
      // then hands of, "dehydrates"
      var clientHandoff = { token, data: cache.clean(token) };
      // instead of rendering to the DOM
      // it just renderes a string
      var html = React.renderToString(<Handler data={data} />);
      var output = indexHTML.
         replace(htmlRegex, html).
         replace(dataRegex, JSON.stringify(clientHandoff));
      cb(null, output, token);
    });
  });
  
  
  ....
Then shows how the client fetches and uses the data. Explains the caching. 
The server passes the data as a global javascript object. Then the client grabs the data, puts into the cache. Then the ajax calls only deal with the cache. So the client handoff is just this ​<script>__DATA__ = ¡DATA!;</script>​. 
- what about flux?
more complicated because of singletons. you would rehydrate and dehydrate into the stores. 
Your data API, can be whatever you want. You can have a Node UI layer in between.