developit · September 5, 2019 00:30 · mxro · Dec 6, 2021 · ghost · Sep 24, 2022
diff --git a/htm-ssr.js b/htm-ssr.js
 const express = require('express');
 const { html, Component } = require('htm/preact');
 const renderToString = require('preact-render-to-string');

 class App extends Component {
  render(props) {
    return html`
      <div class="app">
        <h1>This is an app</h1>
        <p>Current server time: ${new Date + ''}</p>
      </div>
    `;
  }
 }

 const app = express();
 app.get('/', (request, response) => {
  // render your app to an HTML string
  const body = renderToString(html`<${App} url=${request.url} />`);
  
  // wrap it in an HTML document and send it back
  response.send(`<!DOCTYPE html><html><body>${body}</body></html>`);
 });
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "htm": "^2.2.1",
    "preact": "^8.5.2",
    "express": "^4.17.1"
  }
 }
	const express = require('express');
	const { html, Component } = require('htm/preact');
	const renderToString = require('preact-render-to-string');

	class App extends Component {
	render(props) {
	return html`
	<div class="app">
	<h1>This is an app</h1>
	<p>Current server time: ${new Date + ''}</p>
	</div>
	`;
	}
	}

	const app = express();
	app.get('/', (request, response) => {
	// render your app to an HTML string
	const body = renderToString(html`<${App} url=${request.url} />`);

	// wrap it in an HTML document and send it back
	response.send(`<!DOCTYPE html><html><body>${body}</body></html>`);
	});