介紹
Next.js SSR部分如果要更快，可以參考這次要介紹的作法，主角是 'lru-cache'

先設定一個 LRUCache,max 一定要記得設定沒有設定是無限大很容易ＧＧ,maxAge 快取時間基本上建議這兩個要設定

const ssrCache = new LRUCache({
  max: 100,
  maxAge: 1000 * 60 * 60 // 1hour
})

更多參數可以參考 https://www.npmjs.com/package/lru-cache

在原本route 的 res.send 的部分，就寫一個 renderAndCache的 method來代理

  server.get('/', (req, res) => {
    renderAndCache(req, res, '/')
  })

  server.get('/blog/:id', (req, res) => {
    const queryParams = { id: req.params.id }
    renderAndCache(req, res, '/blog', queryParams)
  })

代理部分也很容易理解，先把網址設定為CacheKey

 
function getCacheKey (req) {
  return `${req.url}`
}

function renderAndCache (req, res, pagePath, queryParams) {
  const key = getCacheKey(req)

  // 如果已經有cache了就直接使用 cache的資料
  if (ssrCache.has(key)) {
    console.log(`CACHE HIT: ${key}`)
    res.send(ssrCache.get(key))
    return
  }

  // 如果是第一次就跑一次必且設置一下 ssrCache
  app.renderToHTML(req, res, pagePath, queryParams)
    .then((html) => {
      // 開始設定cache
      console.log(`CACHE MISS: ${key}`)
      ssrCache.set(key, html)

      res.send(html)
    })
    .catch((err) => {
      app.renderError(err, req, res, pagePath, queryParams)
    })
}

總結

在 SSR 部分可以使用 cache 套件來幫忙加快速度，這次介紹的是'lru-cache'，使用上只要在 server 加上 key 與 網頁 到 cache 中， 並且使用 getCacheKey 來 match 是不是已經有 cache過了

Next.js 官方範例可以參考
https://github.com/zeit/next.js/tree/canary/examples/ssr-caching