Skip to content

Instantly share code, notes, and snippets.

@wood1986

wood1986/app.node.js

Last active November 26, 2021 08:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wood1986/c82e0688b0ac54cbd2b263b31571a54c to your computer and use it in GitHub Desktop.
Save wood1986/c82e0688b0ac54cbd2b263b31571a54c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.node.js
import {renderToStaticMarkup, renderToString} from "react-dom/server";
import {App} from "./App";
import {ServerStyleSheet} from "styled-components";
export default async (props = {}) => {
const sheet = new ServerStyleSheet();
const div = renderToString(sheet.collectStyles(<App {...props} />));
// there is no point to dynamicially change the head at runtime
// when users share a link, crawler will hit that link again
return "<!DOCTYPE html>" + renderToStaticMarkup(<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="></link>
<style dangerouslySetInnerHTML={{"__html": __SOURCES__["app.web.css"]}}></style>
<script dangerouslySetInnerHTML={{"__html": `globalThis.props = ${JSON.stringify(props).replace(/</g, "\\u003c")}`}} />
<script dangerouslySetInnerHTML={{"__html": __SOURCES__["app.web.js"]}} />
{sheet.getStyleElement()}
</head>
<body>
<div id="root" dangerouslySetInnerHTML={{"__html": div}} />
<script integrity={__DIGESTS__["vendors.js"]} src={__webpack_public_path__ + __FILES__["vendors.js"]} crossOrigin="anonymous" />
</body>
</html>);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment