inlineStyles = true, inlineScripts = true,

reuseChrome = false, headless = true,

existingBrowser = null} = {}) {

if (useCache && RENDER_CACHE.has(url)) {

return RENDER_CACHE.get(url);

}

const tic = Date.now();

// Reuse existing browser instance or launch a new one.

let browser = existingBrowser;

if (browser) {

console.info('Connecting to provided chrome instance.');

browser = await puppeteer.connect({

browserWSEndpoint: await browser.wsEndpoint()

});

} else if (browserWSEndpoint && reuseChrome) {

console.info('Reusing previously launched chrome instance.');

browser = await puppeteer.connect({browserWSEndpoint});

} else {

browser = await puppeteer.launch({

args: ['--disable-dev-shm-usage'],

headless,

});

browserWSEndpoint = await browser.wsEndpoint();

}

const page = await browser.newPage();

await page.setRequestInterception(true);

const resourcesWhiteList = [

'document', 'script', 'xhr', 'fetch', 'websocket'

];

const urlBlackList = [

'/gtag/js', // Don't load Google Analytics (e.g. inflates page metrics).

];

page.on('request', req => {

const url = req.url();

// Prevent some resources from loading.

if (urlBlackList.find(regex => url.match(regex))) {

req.abort();

return;

}

// Don't abort CSS requests if we're inlining stylesheets into page. Need

// their responses.

if (inlineStyles) {

resourcesWhiteList.push('stylesheet');

if (url.endsWith('styles.css')) {

return req.respond({

status: 200,

contentType: 'text/css',

body: fs.readFileSync('./public/css/styles.min.css', 'utf-8'),

});

}

}

// Small optimization. We only care about rendered DOM, ignore images, and

// other media that don't produce markup.

const type = req.resourceType();

if (onlyCriticalRequests && !resourcesWhiteList.includes(type)) {

req.abort();

return;

}

req.continue(); // pass through everything else.

});

const stylesheetContents = {};

const scriptsContents = {};

if (inlineStyles || inlineScripts) {

page.on('response', async resp => {

const href = resp.url();

const type = resp.request().resourceType();

const sameOriginResource = new URL(href).origin === new URL(url).origin;

// Only inline local resources.

if (sameOriginResource) {

if (type === 'stylesheet') {

stylesheetContents[href] = await resp.text();

} else if (type === 'script') {

scriptsContents[href] = await resp.text();

}

}

});

}

// TODO: another optimization might be to take entire page out of rendering

// path by adding html { display: none } before page loads. However, this may

// cause any script that looks at layout to fail e.g. IntersectionObserver.

// Add param so client-side page can know it's being rendered by headless

// on the server.

const urlToFetch = new URL(url);

urlToFetch.searchParams.set('headless', '');

try {

await page.goto(urlToFetch.href, {waitUntil: 'domcontentloaded'});

await page.waitForSelector('#posts'); // wait for posts to be in DOM.

} catch (err) {

browserWSEndpoint = null;

console.error(err);

await browser.close();

throw new Error('page.goto/waitForSelector timed out.');

}

if (inlineStyles) {

await page.$$eval('link[rel="stylesheet"]', (sheets, stylesheetContents) => {

sheets.forEach(link => {

const css = stylesheetContents[link.href];

if (css) {

const style = document.createElement('style');

style.textContent = css;

link.replaceWith(style);

}

});

}, stylesheetContents);

}

if (inlineScripts) {

await page.$$eval('script[src]', (scripts, scriptsContents) => {

scripts.forEach(script => {

const js = scriptsContents[script.src];

if (js) {

const s = document.createElement('script');

// Note: not using s.text b/c here we don't need to eval the script.

// That will be done client side when the browser renders the page.

s.textContent = js;

s.type = script.getAttribute('type');

script.replaceWith(s);

}

});

}, scriptsContents);

}

// Use browser to prerender page.

const html = await page.content(); // Get serialized DOM output!

if (browserWSEndpoint && reuseChrome || existingBrowser) {

await page.close(); // Close pages we opened.

} else if (!existingBrowser) {

await browser.close(); // Close browser if we created it.

}

console.info(`Headless rendered ${url} in: ${Date.now() - tic}ms`);

RENDER_CACHE.set(url, html); // Cache rendered page.

return html;

// TODO: be more selective. This nukes all cache entries for URLs that

// match the page's origin.

for (const url of RENDER_CACHE.keys()) {

if (url.startsWith(origin)) {

RENDER_CACHE.delete(url);

}

}