読書感想文「実践 Next.js」
概要
書籍「実践 Next.js」 を読了しました。
読書感想文を書いてみます。
読もうと思った背景
業務にて、Next.js で書かれたアプリケーションを本格的に触るようになり、Next.js への理解を深める必要性が生まれました。
それと同時期に、 自分の周りで、本書の輪読会が企画されました。
良い機会だと思い、輪読会に参加する形で読書に踏み切りました。
本文 概要
サブタイトルの通り、Next.js v13 から導入された App Router モデルに焦点を絞った解説本です。
github上にサンプルコードが用意されており、サンプルコードを解説する形で App Router モデルの各種機能を解説する...といった流れで進みます。
Next.js は React とも密接にかかわるのですが、 React の基礎は本書の対象外です。
事前に React の基礎を押さえたうえで本書を読み始めると、Next.js の新機能の学習に専念できそうです。
ハンズオン形式の本ではないため、コードをコピペするだけでは動かないことが多々あります。
ご注意ください。
ハンズオン形式の本ではないため、「コードをコピペしつつ、自分でコードを組み上げながら学びたい！」という方には向いていないかもしれません。
一方で、「動くサンプルアプリケーションを触りながら仕組みを学びたい」という方には向いていると思います。
教訓・学び・感想
フロントエンドの開発経験は少なく、新鮮な気持ちで学習に取り組みました。
特に、「デフォルトでキャッシュが有効」という挙動です。
キャッシュは、「パフォーマンス向上のためのオプション機能」ぐらいの認識だったので、「デフォルトでキャッシュが有効」という発想は自分には無く、非常に驚きました。
数多くのパフォーマンス向上機能を学び、フロントエンドでは、「パフォーマンス向上」は非常に重要な要素だと、認識を改めました。
特に、パフォーマンス向上の観点で、以下二点が非常に重要だと感じました。
- Server Component と Server Action を適切に設定し、重たい処理をバックエンドに委譲する
- キャッシュを上手に設定する
◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇
動くアプリケーションを基に解説が進むため、各機能のユースケースが非常にイメージしやすかったです。
- 「こういう機能や挙動を実現したいから、この機能を使う」「こういう時に困るから、こういった機能や設定を使用する」といった具合
◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇
従来だと、クライアント側のマシンスペックが期待できなかったので、アプリケーションロジックはサーバー側での実装が主流でした。
Next.jsを使う（≒現在）と、クライアント側のマシンスペックもいくらか期待でき、アプリケーションロジックをクライアント側で実装するか、サーバー側で実装するか、エンジニアが選択できるようになったかと思います。
（アプリケーションロジックを、全部クライアント側で実装するという選択をとったのが CSR という認識）
選択肢の余地が生まれて自由度は上がりましたが、言い換えると「選択することが増え、適切な設計が難しくなった」ようにも思います。
ロジックを、クライアント側で実装するか、サーバー側で実装するか。
要件やパフォーマンスを意識したうえで、適切な設計判断を下せる能力が、Next.jsを使いこなすポイントになりそうだ、と感じました。
Discussion