Next.js とは？
https://udemy.benesse.co.jp/development/app/what-is-next-js.html
https://dev.classmethod.jp/articles/introduction-to-nextjs-part-2/
udemy と クラスメソッドの記事を参考にする。
Next.js とは、React.js のラッパーフレームワーク。
React と比べたメリットは下記があると解釈した。
Next.js のメリット
- サーバーとして DB へのクエリなどの処理が書ける
- サーバーサイドのレンダリング機能が組み込まれているから。
- ページを簡単に作れる
- ルーティング機能が組み込まれているから。
- ブログなどの Web サイトを高速に表示できる
- SSG が使えるから。
- ヘッダーやサイドバーなどの共通パーツのみ先に描画できる
- Pre-rendering が使えるから。
SSG ( Static Site Generation ) とは？
サーバー側で、静的な HTML + CSS に全て生成しておくこと。
ビルド時にサーバー側で全ページを生成する。
これを全リクエストに使い回すことで高速化できる。
通常の Java などの SSR (サーバーサイドレンダリング) のアプリでは、
リクエスト毎に HTML + CSS を生成している。
それと比べると高速化できていると言えると解釈した。
Pre-rendering とは？
Next.js の SSR や SSG で、静的な変更のない要素だけ先に描画する機能。
先に変更がされないブログ記事のヘッダーや著者プロフィールが描画されて
後からブログ記事の中身が描画されると解釈した。
UX が良さそう。ずっと何も表示されずに待っている旧来のレンダリングより。
ISR ( Incremental Static Re-generation ) とは？
マイナビの記事によれば、秒単位でビルドして、中身を更新してくれる機能のようだ。
ISR をしていない場合は、1 日に 3 回ほどパイプラインを組んで更新するのではないかと予想する。
Next 11 からのみ使えるらしい。
今後
クリーアーキに寄せてみる
- MySQL サーバーから値を読み書きする Driver 層を作る
- バックエンドとして API として提供する Rest 層を作る
- フロントエンドとして API から取り込むステートを作る
Top comments (0)