如何在没有大量加载时间的情况下使用由云功能提供的 Nuxt.js？

Question

我喜欢使用 vue.js，但是对于一些即将进行的项目，我将需要使用 Nuxt 以便为 SEO 获得更好的排名。我没有太多设置 Nuxt 的经验，但能够找到很多关于如何提供快速应用程序运行 nuxt 的好教程。我通常将我的项目与 firebase 集成用于 auth 和 db 以及云功能，所以我也会使用云功能来为这些 nuxt 网络应用程序提供服务..

但是...设置所有内容并不难...另一端的加载时间很糟糕，我觉得这会使任何用例几乎无法使用。当互联网连接良好时，常规网站/应用程序（几乎）立即加载，但我的 test-nuxt-websites 在显示页面之前始终显示白屏 5-10 秒。

我认为这与云功能的冷启动有关，但是您将如何实现 nuxt？我不明白替代方案是什么，是吗？无法想象公司会喜欢这么长的加载时间（google 两者都不喜欢）

我用 Nuxt 设置的快速演示项目：https://yke.plus/

我的函数代码：

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)

Answer 1

可能晚了，但尝试将您的缓存控制更改为更高的值，例如：

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

也可以为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

如何在没有大量加载时间的情况下使用由云功能提供的 Nuxt.js？

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

firebase

vue.js

server-side-rendering

google-cloud-functions

nuxt.js