Nuxt.js の SSR で Cache-Control などのヘッダーを付与する

Nuxt.js の SSR で、 HTTP のレスポンスヘッダー変えたいなって思った時にどうやるのがいいのか考えた時にメモ

結論

header の付与には serverMiddleware を使う

他の検討候補に比べて手軽だし、特に問題はないと思う。

nuxt.config.js

  serverMiddleware: ["~/middleware/response-header.js"],

middleware/response-header.js

export default (req, res, next) => {
  // req の path によって変えるなど内容は自由に……
  res.setHeader("Cache-Control", "public, max-age=600, s-maxage=3000");
  next();
};

他の検討候補

module を使う

Nuxt.js を使っていると、色々と便利なモジュールがあるので、まずモジュールはないかって考えてしまったりする。
実際レスポンスヘッダーを変更するモジュールはあり、使い方も README に書いてあった。
nuxt-custom-headers
しかし、上記リポジトリの Issue や Pull Request で既に挙げられているが、 nuxt generate の時の考慮がされていなかったり、注意が必要なため、あまりお勧めできないと感じた。

module を作る

ちょうど良いモジュールがないならば作るか？
というわけで自分ならどう作るかを考え、 CSR であったり nuxt generate での静的HTML生成にはレスポンスヘッダーは関係がないので、 addServerMiddleware() を使って追加するのが良いかと思った。
ただ、モジュールとして共通化する意味をあまり感じなかったので、結局作らず

サーバーアプリケーションを利用する

Nuxt.js はデフォルトの nuxt start で起動するサーバーではなく、 Express, Koa, Micro などのアプリケーションに変更することができるので、そっちの方でレスポンスヘッダーを変更することもできそう。