接上篇
防止重新渲染
其实说不对客户端代码做任何修改是忽悠人的。在我们的Express 应用中，通过Puppteer加载页面，提供给客户端响应，但是这个过程是有一些问题的。
js脚本在服务端的Headless Chrome 中执行过一次，但是等浏览器拿到真正的结果后，并不会阻止js再次执行，所以这种情况下js会执行两次（客户端一次，服务端一次）
针对我们的例子，我们可以简单的修复一下，我们需要告诉页面，需要的html已经生成了，不需要再次生成了，所以我们可以简单的检测<ul id="posts"> 是否在初始化时已存在，如果存在，说明在服务端已经渲染OK，没有必要重新渲染了。代码简单修改如下：
public/index.html
<html>
<body>
<div id="container">
<!-- Populated by JS (below) or by prerendering (server). Either way,
#container gets populated with the posts markup:
<ul id="posts">...</ul>
-->
</div>
</body>
<script>
...
(async() => {
const container = document.querySelector('#container'); // Posts markup is already in DOM if we're seeing a SSR'd.
// Don't re-hydrate the posts here on the client.
const PRE_RENDERED = container.querySelector('#posts');
//只有dom不存在时，才会在客户端渲染
if (!PRE_RENDERED) {
const posts = await fetch('/posts').then(resp => resp.json());
renderPosts(posts, container);
}
})();
</script>
</html>
优化
除了缓存预渲染后的结果之外，其实有很多有趣优化方案通过ssr（）。有些优化方案是比较容易看到成效的，有的则需要细致的思考才能看到成效，这主要根据应用页面的类型以及应用的复杂度而定。
终止非必须请求
当前，整个页面（以及页面中的所有资源）都是在无头chrome中无条件加载。然后，我们实际上只关注两件事儿：
1.渲染后的Html 标签
2.能够生成标签的js请求
所以不构建Dom结果的网络请求都是浪费网络资源。比如图片、字体文件、样式文件和媒体资并不实际参与构建HTML。样式只是完整或者布局DOM，但是并不会显示的创建它，所以我们应该告诉浏览器忽略掉这些资源！这样做我们可以很大程度的节省带宽提升预渲染的时间，尤其对于包含了大量资源的页面。
Devtools协议支持一个强大的特性，叫做网络拦截，这种机制可以让我们在浏览器真正发起请求之前修改请求对象。Puppteer通过开启page.setRequestInterception(true)并设置page对象的请求事件， 来启用网络拦截机制。它允许我们终止对某种资源的请求，放行我们允许的请求。
ssr.mjs
async function ssr(url) {
...
const page = await browser.newPage();
// 1. 启用网络拦截器.
await page.setRequestInterception(true);
page.on('request', req => {
// 2.终止掉对不构建DOM的资源请求 // (images, stylesheets, media).
const whitelist = ['document', 'script', 'xhr', 'fetch'];
if (!whitelist.includes(req.resourceType())) {
return req.abort();
}
// 3. 其他请求正常放行
req.continue();
});
await page.goto(url, {waitUntil: 'networkidle0'});
const html = await page.content(); // serialized HTML of page DOM.
await browser.close();
return {html};
}
内联资源文件内容
通常情况下，我们使用构建工具（如gulp等）在构建时直接把js、css等内联到页面中。这样中可以提升通过减少http请求来提升页面初始化性能。
除了使用构建工具外，我们也可以使用浏览器做同样的工作，我们可以使用Puppteer操作页面DOM，内联styles、Javascript以及其他你想在预渲染之前内联进去的资源。
这个列子展示了如果通过拦截响应对象，把本地css资源内联到page的style标签中：
import urlModule from 'url';
const URL = urlModule.URL; async function ssr(url) {
...
const stylesheetContents = {}; // 1. Stash the responses of local stylesheets.
page.on('response', async resp => {
const responseUrl = resp.url();
const sameOrigin = new URL(responseUrl).origin === new URL(url).origin;
const isStylesheet = resp.request().resourceType() === 'stylesheet';
//对和页面同一个域名的styles 暂存
if (sameOrigin && isStylesheet) {
stylesheetContents[responseUrl] = await resp.text();
}
}); // 2. Load page as normal, waiting for network requests to be idle.
await page.goto(url, {waitUntil: 'networkidle0'}); // 3. Inline the CSS.
// Replace stylesheets in the page with their equivalent <style>.
await page.$$eval('link[rel="stylesheet"]', (links, content) => {
links.forEach(link => {
const cssText = content[link.href];
if (cssText) {
const style = document.createElement('style');
style.textContent = cssText;
link.replaceWith(style);
}
});
}, stylesheetContents); // 4. Get updated serialized HTML of page.
const html = await page.content();
await browser.close(); return {html};
}
对上述代码做一下简单说明：
1、使用page.on("response") 事件监听网络响应。
2、拦击对本地css资源的响应并暂存
3、找到所有link标签，替换为style标签，并设置textContent 为上一步暂存的内容。
自动最小化资源
另外一招你可以使用网络拦截器的是响应内容
比如，举个例子来说，那你想在你的app中压缩css资源，但是你同时希望在开发阶段不做任何压缩。那么这时你也可以通过在Puppteer在预渲染阶段重写响应内容，具体如下代码：
import fs from 'fs';
async function ssr(url) {
...
// 1. Intercept network requests.
await page.setRequestInterception(true);
page.on('request', req => {
// 2. If request is for styles.css, respond with the minified version.
if (req.url().endsWith('styles.css')) {
return req.respond({
status: 200,
contentType: 'text/css',
body: fs.readFileSync('./public/styles.min.css', 'utf-8')
});
}
...
req.continue();
});
...
const html = await page.content();
await browser.close();
return {html};
}
这里主要是使用request.respond方法，可直接查看接口说明文档https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#requestrespondresponse
复用当个Chrome实例
每次预渲染都启动一个browser实例会有很大的服务器负担，所以更好的方法是，渲染不同页面的时候或者说启动不同渲染器的时候使用同一个实例，这样能很大的程度的节省服务端的资源，增加预渲染的速度。
Puppteer可以通过调用Puppteer.connect(url) 来连接到一个已经存在的实例，进而避免创建新的实例。为了保持一个长期运行的browser实例，我们可以修改我们的代码，把启动chrome的代码从ssr（）移动到Express Server入口文件中：
server.mjs
import express from 'express';
import puppeteer from 'puppeteer';
import ssr from './ssr.mjs'; let browserWSEndpoint = null;
const app = express(); app.get('/', async (req, res, next) => {
if (!browserWSEndpoint) {
const browser = await puppeteer.launch();
browserWSEndpoint = await browser.wsEndpoint();
} const url = `${req.protocol}://${req.get('host')}/index.html`;
const {html} = await ssr(url, browserWSEndpoint); return res.status(200).send(html);
});
ssr.mjs
import puppeteer from 'puppeteer'; /**
* @param {string} url URL to prerender.
* @param {string} browserWSEndpoint Optional remote debugging URL. If
* provided, Puppeteer's reconnects to the browser instance. Otherwise,
* a new browser instance is launched.
*/
async function ssr(url, browserWSEndpoint) {
...
console.info('Connecting to existing Chrome instance.');
const browser = await puppeteer.connect({browserWSEndpoint}); const page = await browser.newPage();
...
await page.close(); // Close the page we opened here (not the browser). return {html};
}
中篇结束，下篇为最终篇（定时跑预渲染例子&其它注意事项）请持续关注
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1v8oi9k363vog