title: How does the prerender actually work?
body: <p>Resources on server side rendering are scarce, in fact, I couldn't find anything that clearly explains how things actually work. I've seen some repos, tried to follow the code, but didn't manage to figure out the gist of it. If I run angular normally, I know basically what happens:</p>
  
  <ol>
  <li>HTML file is loaded: <code>&lt;html&gt;&lt;body&gt;&lt;my-app&gt;...&lt;/my-app&gt;&lt;SCRIPTS/&gt;&lt;/body&gt;&lt;/html&gt;</code></li>
  <li>Scripts are loaded...</li>
  <li>Angular processes code, and replaces <code>&lt;my-app&gt;</code> with all the goodies inside.</li>
  </ol>
  
  <p>For this app:</p>
  
  <pre><code>@Component({
    selector: 'my-app'
    template: `&lt;p *ngFor="let i of items"&gt;{{ i }}&lt;/p&gt;`,
  })
  export class AppComponent {
    items = [1, 2, 3];
  }
  </code></pre>
  
  <p>I can see inspect html (<a href="http://plnkr.co/edit/jm1k1pjkZ4Ib0fQjNIEV?p=preview">plunker</a>) and see:</p>
  
  <pre><code>&lt;my-app&gt;
    &lt;!--template bindings={
      "ng-reflect-ng-for-of": "1,2,3"
    }--&gt;
    &lt;p&gt;1&lt;/p&gt;
    &lt;p&gt;2&lt;/p&gt;
    &lt;p&gt;3&lt;/p&gt;
  &lt;/my-app&gt;
  </code></pre>
  
  <p>All clear so far! (:</p>
  
  <p>But what happens with prerender?  If I create a file like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;my-app&gt;
      &lt;!--template bindings={
          "ng-reflect-ng-for-of": "1,2,3"
        }--&gt;
      &lt;p&gt;1&lt;/p&gt;
      &lt;p&gt;2&lt;/p&gt;
      &lt;p&gt;3&lt;/p&gt;
    &lt;/my-app&gt;
    &lt;SCRIPTS/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What will Angular do once scripts are loaded? Can I use this html instead of the first one? If someone understands how this process works, please share (; Any info about this stuff would be useful... Can I <strong><em>Copy outerHTML</em></strong>, and make that my "prerendered page"? ...like this:</p>
  
  <p><a href="https://i.stack.imgur.com/jKqfI.png"><img src="https://i.stack.imgur.com/jKqfI.png" alt="Copy outerHTML"></a></p>
  
  <p>If not, why? I'm looking for the essence of the process, an example that could be coded by hand and work...</p>