How can I cache pages?

[falstack]

What problem does this feature solve?

Page-level Caching

What does the proposed changes look like?

I have read：

1. how to cache one page and avoid rendering each time?
2. how can i cache page?
3. Use lru-cache to save nuxt.render() result?
4. nuxt.renderRoute(route, context = {})

and the doc see:
This method should be used mostly for test purposes as well with nuxt.renderAndGetWindow.

look like the method nuxt.renderRoute just for test

so, what should I do for caching page ?

I create a question to cmtp, but on one reply... so I create this issue, please tell me how can i do, thanks！

_{This feature request is available on Nuxt community (#c8415)}

[falstack]

Can anyone help me?

[mavrick]

Hey there, try and take a look at @nuxtjs/component-cache or using the nuxt build to generate static html files that you can then deploy somewhere. Let me know if that helps.

[falstack]

@mavrick no，not component-cache, i need page-cache

server.get('*', (req, res) => {
  const cacheable = isCacheable(req)
  if (cacheable) {
    const hit = microCache.get(req.url)
    if (hit) {
      return res.end(hit)
    }
  }

  renderer.renderToString((err, html) => {
    res.end(html)
    if (cacheable) {
      microCache.set(req.url, html)
    }
  })
})

[fmoessle]

I use a custom server but I am not very happy with it - gonna rewrite it tonight :D cause I want to use brotli and compression only allows gzip :(

import { Nuxt } from 'nuxt'
import compression from 'compression'
import express from 'express'
import apicache from 'apicache'
import config from './nuxt.config'
config.dev = false

const cache = apicache.options({
  headers: {
    'cache-control': 'no-cache'
  }
}).middleware
const cacheSuccesses = cache('12 hours', (req, res) => res.statusCode === 200)

// => create nuxt for using the nuxt.render-function
const nuxt = new Nuxt(config)

// => create express app
const app = express()
const port = 3000

app.get('/api/cache/index', (req, res) => {
  res.json(apicache.getIndex())
})

app.use(compression())
app.use(cacheSuccesses)
app.use(nuxt.render)

app.listen(port, '0.0.0.0', () => {
  console.log('Server listening on `localhost:' + port + '`.')
})

[manniL]

@fmoessle regarding Brotli:

There is a workaround for that (read my blog post about Nuxt.js on Brotli).

@clarkdo already submitted a PR for Brotli support in compression as the native support landed in node.

Ideally, you should use a reverse proxy like NGINX or a CDN like Cloudflare to encode the files with Brotli

[fmoessle]

@manniL I already implemented it as you described in your blogpost. Thanks :)

[clarkdo]

Found a nuxt module for page level cache, hope it can help you https://github.com/arash16/nuxt-ssr-cache

[falstack]

Thanks！！！

[ziaadini]

here is the new solution for cache the whole page

even you can cache consistent api like menu if you need

https://www.npmjs.com/package/nuxt-perfect-cache

npm i nuxt-perfect-cache

// nuxt.config.js

modules: [
    [
        'nuxt-perfect-cache',
        {
          disable: false,
          appendHost: true,
          ignoreConnectionErrors:false, //it's better to be true in production
          prefix: 'r-',
          url: 'redis://127.0.0.1:6379',
          getCacheData(route, context) {          
            if (route !== '/') {
              return false
            }
            return { key: 'my-home-page', expire: 60 * 60 }//1hour
          }
        }
      ]
]