title: Can I do the server rendering with data in React?
body: <p>I'm working on react recently. I am using the server rendering with react-router, but it can only render the HTML from react components, and I need to get the initial data via ajax in <code>componentDidMount()</code>.</p>
  
  <p>The problem is for some pages/components, they need the initial data to render. So if users visit such a page directly(by typing url or refresh), the page broken, because the server cannot render it without initial data.</p>
  
  <p>I'm thinking can I get the data from database and insert it to template when rendering in server? Just like what classic front-end template or PHP does.</p>
  
  <p>If no way, what's the best practice for rendering first-page data?</p>
  
  <p>Now my server code is like:</p>
  
  <pre><code>router.get('*', function(req, res) {
    console.log('GET ADMIN');
    match({
      routes: appRoutes,
      location: req.originalUrl
    }, (error, redirectLocation, renderProps) =&gt; {
      if (error) {
        res.status(500)
          .send(error.message);
      } else if (redirectLocation) {
        res.status(302)
          .redirect(redirectLocation.pathname + redirectLocation.search);
      } else if (renderProps) {
        var content = renderToString(&lt;RoutingContext {...renderProps}/&gt;);
        var html = swig.renderFile('src/client/admin.html', {
          content: content
        });
        res.status(200)
          .send(html);
      } else {
        res.status(404)
          .send('Not found');
      }
    });
  });
  </code></pre>