Example how to connect client to server-rendered DOM?

[Download]

Hi, I'm experimenting with universal rendering with Preact and I'm running into this strange issue.

I render my HTML on the server using this library. It works well.
But then, when I render to the DOM on the client, it adds the content to the existing nodes instead of replacing it.
To get around this I'm now doing this on the client:

var root = document.getElementById('app-root');
root.innerHTML = '';
render(<App />, root);

Is this the correct way or should I somehow be able to 'mount' render to the existing DOM tree? I am worried that this will give ugly flashes when my app becomes bigger.

I could not find an example of this. Is there one?

[developit]

Hi @Download! This is one small difference between Preact and React: if you want Preact to replace a DOM Element, you need to tell it which one. You can do this by passing that element as a third argument to render():

var root = document.getElementById('app-root');
render(<App />, root, root.lastElementChild);

There are some details described here:
preactjs/preact#24

Remember that the second argument is what to render into, and the third is what to replace - so in the above example I'm assuming you want your app to work something like:

<div id="app-root">
  <App /> <!-- app is rendered into #app-root -->
</div>

[Download]

Ah that is so simple now that you've explained it!

Thanks for your answer and for this great project!