title: Scraping React Site with Phantomjs
body: <p>I am scraping a website that is using React components, using PhantomJS in Nodejs.</p>
  
  <p>With this: <a href="https://github.com/amir20/phantomjs-node" rel="nofollow noreferrer">https://github.com/amir20/phantomjs-node</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>phantom.create().then(ph =&gt; {
      _ph = ph;
      return _ph.createPage();
  }).then(page =&gt; {
      _page = page;
      return _page.open(url);
  }).then(status =&gt; {
      return _page.property('content');
  }).then(content =&gt; {
      console.log(content);
      _page.close();
      _ph.exit();
  }).catch(e =&gt; console.log(e));
  </code></pre>
  
  <p>Problem is the react content is not rendered, it only says: <code>&lt;!-- react-empty: 1 --&gt;"</code> where the actual react component should be loaded.</p>
  
  <p>How can I scrap the rendered react component? I initially switched from a pure node-request solution to PhantomJS to fix this but now I am stuck.</p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>So I dont have a real solution yet. I switched to NightmareJS (<a href="https://github.com/segmentio/nightmare" rel="nofollow noreferrer">https://github.com/segmentio/nightmare</a>) which has a nice <code>.wait('.some-selector')</code> function, which waits till the specified selector is loaded. This fixed my problems with dynamically loaded react components.</p>