From 3a66cd1cd4d39476c681476c8ef1a5b055476c8a Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 1 Oct 2019 15:25:38 +0800 Subject: [PATCH 1/4] Enable renderToNodeStream for browse page --- modules/actions/serveBrowsePage.js | 40 +++++++++++++++--------------- modules/templates/MainTemplate.js | 2 +- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/modules/actions/serveBrowsePage.js b/modules/actions/serveBrowsePage.js index 01085b97..f47a6b7f 100644 --- a/modules/actions/serveBrowsePage.js +++ b/modules/actions/serveBrowsePage.js @@ -1,11 +1,11 @@ -import { renderToString, renderToStaticMarkup } from 'react-dom/server'; +import { renderToNodeStream } from 'react-dom/server'; import semver from 'semver'; import BrowseApp from '../client/browse/App.js'; import MainTemplate from '../templates/MainTemplate.js'; import asyncHandler from '../utils/asyncHandler.js'; import getScripts from '../utils/getScripts.js'; -import { createElement, createHTML } from '../utils/markup.js'; +import { createElement } from '../utils/markup.js'; import { getVersionsAndTags } from '../utils/npm.js'; const doctype = ''; @@ -43,27 +43,27 @@ async function serveBrowsePage(req, res) { filename: req.filename, target: req.browseTarget }; - const content = createHTML(renderToString(createElement(BrowseApp, data))); + const content = createElement(BrowseApp, data); const elements = getScripts('browse', 'iife', globalURLs); - const html = - doctype + - renderToStaticMarkup( - createElement(MainTemplate, { - title: `UNPKG - ${req.packageName}`, - description: `The CDN for ${req.packageName}`, - data, - content, - elements - }) - ); - - res - .set({ - 'Cache-Control': 'public, max-age=14400', // 4 hours - 'Cache-Tag': 'browse' + const stream = renderToNodeStream( + createElement(MainTemplate, { + title: `UNPKG - ${req.packageName}`, + description: `The CDN for ${req.packageName}`, + data, + content, + elements }) - .send(html); + ); + + res.set({ + 'Cache-Control': 'public, max-age=14400', // 4 hours + 'Cache-Tag': 'browse' + }); + + res.write(doctype); + + stream.pipe(res); } export default asyncHandler(serveBrowsePage); diff --git a/modules/templates/MainTemplate.js b/modules/templates/MainTemplate.js index 3f09d605..a2881fc8 100644 --- a/modules/templates/MainTemplate.js +++ b/modules/templates/MainTemplate.js @@ -53,7 +53,7 @@ gtag('config', 'UA-140352188-1');`), e( 'body', null, - e('div', { id: 'root', dangerouslySetInnerHTML: content }), + e('div', { id: 'root' }, content), ...elements ) ); From 377e80d5345b8a077b384ebf7a467c7dccb4dc93 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 1 Oct 2019 15:43:34 +0800 Subject: [PATCH 2/4] Add explicit content-type --- modules/actions/serveBrowsePage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/actions/serveBrowsePage.js b/modules/actions/serveBrowsePage.js index f47a6b7f..021ac12a 100644 --- a/modules/actions/serveBrowsePage.js +++ b/modules/actions/serveBrowsePage.js @@ -57,6 +57,7 @@ async function serveBrowsePage(req, res) { ); res.set({ + 'Content-Type': 'text/html', 'Cache-Control': 'public, max-age=14400', // 4 hours 'Cache-Tag': 'browse' }); From 6cf93ff78df8890342c0024c4dfd1008a9ef9260 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 1 Oct 2019 16:53:27 +0800 Subject: [PATCH 3/4] Apply renderToNodeStream to serveMainPage --- modules/actions/serveMainPage.js | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/modules/actions/serveMainPage.js b/modules/actions/serveMainPage.js index 783bec59..0e9bb9c5 100644 --- a/modules/actions/serveMainPage.js +++ b/modules/actions/serveMainPage.js @@ -1,9 +1,9 @@ -import { renderToString, renderToStaticMarkup } from 'react-dom/server'; +import { renderToNodeStream } from 'react-dom/server'; import MainApp from '../client/main/App.js'; import MainTemplate from '../templates/MainTemplate.js'; import getScripts from '../utils/getScripts.js'; -import { createElement, createHTML } from '../utils/markup.js'; +import { createElement } from '../utils/markup.js'; const doctype = ''; const globalURLs = @@ -20,17 +20,20 @@ const globalURLs = }; export default function serveMainPage(req, res) { - const content = createHTML(renderToString(createElement(MainApp))); + const content = createElement(MainApp); const elements = getScripts('main', 'iife', globalURLs); - const html = - doctype + - renderToStaticMarkup(createElement(MainTemplate, { content, elements })); + const stream = renderToNodeStream( + createElement(MainTemplate, { content, elements }) + ); - res - .set({ - 'Cache-Control': 'public, max-age=14400', // 4 hours - 'Cache-Tag': 'main' - }) - .send(html); + res.set({ + 'Content-Type': 'text/html', + 'Cache-Control': 'public, max-age=14400', // 4 hours + 'Cache-Tag': 'main' + }); + + res.write(doctype); + + stream.pipe(res); } From a2495e3736b4f2ed8216739c709ea6aac30a238e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 2 Oct 2019 16:50:30 +0800 Subject: [PATCH 4/4] Move data for hydration script to body --- modules/templates/MainTemplate.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/templates/MainTemplate.js b/modules/templates/MainTemplate.js index a2881fc8..5ec4eb8e 100644 --- a/modules/templates/MainTemplate.js +++ b/modules/templates/MainTemplate.js @@ -47,13 +47,13 @@ gtag('config', 'UA-140352188-1');`), favicon && e('link', { rel: 'shortcut icon', href: favicon }), e('title', null, title), x(promiseShim), - x(fetchShim), - data && x(`window.__DATA__ = ${encodeJSONForScript(data)}`) + x(fetchShim) ), e( 'body', null, e('div', { id: 'root' }, content), + data && x(`window.__DATA__ = ${encodeJSONForScript(data)}`), ...elements ) );