はじめに

こんにちは、HappyManaです。
今回、Next.jsでの開発をして起きた問題について話していきたいと思います。

Next.jsのレンダリングが死ぬほど遅い

Next.jsを立ち上げたとき、初回で最大120秒ほどレンダリングに時間がかかります。

長すぎて萎えます。
まだ特にコードも追加してない、create-next-appしたときで23秒でした。

ここで、開発環境を整理すると、以下の感じになってます。

Docker
Next.js 13
Node.js 18
pnpm(パッケージ管理)

Dockerについては、APIサーバの方でRails+PostgreSQLを使っていたので、それ用のサーバも一緒に立ち上げるために使っています。

原因を考える

まず考えたのが私のPCのせいかなと思ったんですが、他の人のPCでも立ち上げ時間が変わらなかったので、違いました。
また、Cloudflare Pagesにデプロイしてみたところ爆速でレンダリングされたので関係ありませんでした。

次に、Dockerの環境が重すぎるのかと思いました。
Dockerfileは以下になってます。

FROM node:18

WORKDIR /usr/src/app

COPY package.json pnpm-lock.yaml ./

RUN npm install -g pnpm && \
    pnpm install

COPY . .

RUN pnpm build

EXPOSE 3000

CMD ["pnpm", "dev"]

調べたら、なんとImageのSizeが2.24GBありました笑

これをなんとかするために、まずNodeのimageをslimに変更しました。

// before
FROM node:18

// after
FROM node:18-slim

これで、ImagのSizeは1.27GBまで減りました。

まあまあですね。

また、初回レンダリングの時間も120秒から50秒に減ったのでまあまあ減ったのではないでしょうか...

まだまだ遅いので、もっと早くするためにいろいろ試していこうと思います。
（それはまた発見があり次第追記します...）