pppr

pppr is a zero-configuration prerender service. If you develop a web via client-side rendering (such as Vue, Angular, React...), you can integrate Nginx (or other reverse proxy) and pppr for search engine crawler (such as googlebot, bingbot...) and social network (such as Facebook, Twitter...) to render complete HTML.

Usage

const pppr = require('pppr');

app.use(pppr());

Installation

npm i pppr

Configuration

Nginx

Configuration

Cache (default is turn on)

app.use(pppr());

// equals to

app.use(pppr({
  cache: true
}));

If you want to turn off cache, you can do below configuration.

app.use(pppr({
  cache: false
}));

If you want to modify cache parameter, you can do below configuration.

app.use(pppr({
  cache: {
    max: 50, // LRU cache entry max count (default is 50)
    ttl: 300000 // LRU cache entry ttl (milliseconds, default is 300000)
  }
}));

Retry times (default is 5)

If it renders occur timeout, you can retry render again.

app.use(pppr({
  retryTimes: 5
}));

Endpoint (default is /render)

If endpoint conflicts, you can change it.

app.use(pppr({
  endpoint: '/render'
}));

Callback

If you want to do something before/after render, you can do below configuration.

app.use(pppr({
  beforeRender: (userAgent, url) => {
    // do something
  },
  afterRender: (userAgent, url, content) => {
    // do something
  }
}))

How-to

When Nginx received a request, it will check it is crawler or not. If it is crawler, it will forward to prerender service (such as pppr). Otherwise it will forward to web server.

Lyrics

I have a page, I want to prerender it.

Ah, pppr.

Inspired from

prerender/prerender