はじめに
こんにちは、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秒に減ったのでまあまあ減ったのではないでしょうか...
まだまだ遅いので、もっと早くするためにいろいろ試していこうと思います。
（それはまた発見があり次第追記します...）