Nuxt2.5でFirebaseでSSRするCloud Functionsの書き方

Nuxt2.5でTypeScriptサポートが強化されました！！
でも、Nuxtクラスが少し変わったので、SSR時にCloud Funtctionsも少し変更が必要に。。その時の備忘録

[IMPORTANT] Migration Guide

Programmatic API / Middleware

If not already done, please explicitly call nuxt.ready() after new Nuxt(). nuxt.ready() was always async, but not awaiting the function call has now a severe impact.

   const nuxt = new Nuxt(config)
++ await nuxt.ready()

Nuxt2.5の場合

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

const app = express();
const config = {
  dev: false,
  buildDir: "nuxt",
  build: {
    publicPath: "/assets/"
  }
};
const nuxt = new Nuxt(config);

async function handleRequest(req, res) {
  res.set("Cache-Control", "public, max-age=300, s-maxage=600")
  await nuxt.ready(); // ← nuxt.ready()でawaitしないといけなくなった！！
  return await nuxt.render(req, res);
}
app.use(handleRequest);
exports.ssr = functions.https.onRequest(app);

ポイントは、nuxt.ready()をawait付きで呼び出すこと

よくあるNuxt2.4までのFunction例：その１

関数を作らず、nuxt.renderをそのまま使うパターン

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

const app = express();
const config = {
  dev: false,
  buildDir: "nuxt",
  build: {
    publicPath: "/assets/"
  }
};
const nuxt = new Nuxt(config);
app.use(nuxt.render);
exports.ssr = functions.https.onRequest(app);

よくあるNuxt2.4までのFunction例：その2

関数を作って、キャッシュを設定するパターン

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

const app = express();
const config = {
  dev: false,
  buildDir: "nuxt",
  build: {
    publicPath: "/assets/"
  }
};
const nuxt = new Nuxt(config);

function handleRequest(req, res) {
  res.set("Cache-Control", "public, max-age=300, s-maxage=600")
  return nuxt.render(req, res);
}
app.use(handleRequest);
exports.ssr = functions.https.onRequest(app);

よくあるNuxt2.4までのFunction例：その3

関数を作って、キャッシュを設定するパターンのasync/await版

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

const app = express();
const config = {
  dev: false,
  buildDir: "nuxt",
  build: {
    publicPath: "/assets/"
  }
};
const nuxt = new Nuxt(config);

async function handleRequest(req, res) {
  res.set("Cache-Control", "public, max-age=300, s-maxage=600")
  return await nuxt.render(req, res);
}
app.use(handleRequest);
exports.ssr = functions.https.onRequest(app);

参考にしたサイト様

• Release Notes - Nuxt.js