Preact SSR Hydration

by Jason Miller

HTML

<script src="https://unpkg.com/preact"></script>
<script src="https://npmcdn.com/preact-render-to-string"></script>

Babel + JSX

const { h, Component, render } = preact; /** @jsx h */
const renderToString = preactRenderToString;

const App = () => (
	<div class="app">
		<header id="appbar">
			<h1>Demo App</h1>
		</header>
		<section id="main">
			<aside class="sidebar" open>
				<h4>Sidebar</h4>
				<nav>
					<a href="/1">One</a>
					<a href="/2">Two</a>
				</nav>
			</aside>
			<div class="page">
				pre text here.
				<p>Make sure no DOM changes were logged to console!</p>
				{['foo', 'bar', null, 'baz']}
			</div>
		</section>
	</div>
);


let html = renderToString(<App />);

document.body.innerHTML = html;

// watch for DOM updates - there should be 0
watch(Element.prototype, 'appendChild');
watch(Element.prototype, 'replaceChild');
watch(Element.prototype, 'insertBefore');

render(<App />, document.body, document.body.lastChild);


function watch(obj, method) {
	let p = obj[method];
	obj[method] = function(...args) {
		console.log(method+' called: ', ...args);
		//debugger;
		return p.apply(this, args)
	};
}