CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-functionsnuxt.jsserver-side-rendering
CVE
CVE

Reputation: 171

How to use Nuxt.js served by cloud functions without huge loading times?

I love using vue.js, but for a few upcoming projects I'm going to need to use Nuxt in order to rank better for SEO. I don't have a lot of experience setting up Nuxt but was able to find quite a lot of good tutorials on how to serve up a express app running nuxt. I usually integrate my projects with firebase for auth and db as well as cloud functions, so I would use cloud functions to serve up these nuxt web apps as well..

But... Setting everything up isn't all that hard... the loading times on the other end are terrible and I feel like this renders any use case close to unusable. Regular websites / apps load (almost) instantly when having a good internet connection, but my test-nuxt-websites consistently show a white screen for 5 - 10 seconds before showing the page.

I think this has to do with the cold start of cloud functions, but then how would you go about implementing nuxt? I don't understand what the alternative is, is there? Can't imagine companies would appreciate such long loading times (and google neither)

A quick demo project I set up with Nuxt: https://yke.plus/

My functions code:

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')

const app = express()

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest (req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

Upvotes: 1

Views: 423

Answers (1)

Emaia
Emaia

Reputation: 81

Maybe late but try to change your cache control to a higher value like:

res.set('Cache-Control', 'public, max-age=15778476, s-maxage=15778476')

Also you can config cache control for the static resources in firebase.json:

"headers": [
      ...
      {
        "source": "**/*.@(jpg|jpeg|gif|png|css|js|ico|svg)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, s-maxage=31536000"
          }
        ]
      },
      ...
]

https://firebase.google.com/docs/hosting/full-config?hl=pt-br#headers

Upvotes: 1

Related Questions