DEV Community

kaede
kaede

Posted on

Next 基礎 Part 00 -- 概要整理

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 のメリット

  1. サーバーとして DB へのクエリなどの処理が書ける
    • サーバーサイドのレンダリング機能が組み込まれているから。
  2. ページを簡単に作れる
    • ルーティング機能が組み込まれているから。
  3. ブログなどの Web サイトを高速に表示できる
    • SSG が使えるから。
  4. ヘッダーやサイドバーなどの共通パーツのみ先に描画できる
    • Pre-rendering が使えるから。

SSG ( Static Site Generation ) とは?

サーバー側で、静的な HTML + CSS に全て生成しておくこと。

ビルド時にサーバー側で全ページを生成する。
これを全リクエストに使い回すことで高速化できる。

通常の Java などの SSR (サーバーサイドレンダリング) のアプリでは、
リクエスト毎に HTML + CSS を生成している。
それと比べると高速化できていると言えると解釈した。


Pre-rendering とは?

https://dev.classmethod.jp/articles/introduction-to-nextjs-part-2/#:~:text=Summary%3A%20Pre%2Drendering%20vs%20No%20Pre%2Drendering

Next.js の SSR や SSG で、静的な変更のない要素だけ先に描画する機能。

先に変更がされないブログ記事のヘッダーや著者プロフィールが描画されて
後からブログ記事の中身が描画されると解釈した。

UX が良さそう。ずっと何も表示されずに待っている旧来のレンダリングより。


ISR ( Incremental Static Re-generation ) とは?

https://engineerblog.mynavi.jp/technology/on-demand_isr_introduction/#:~:text=ISR%E3%81%A8%E3%81%AF%E3%80%81%20Incremental%20Static,%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

マイナビの記事によれば、秒単位でビルドして、中身を更新してくれる機能のようだ。

ISR をしていない場合は、1 日に 3 回ほどパイプラインを組んで更新するのではないかと予想する。

Next 11 からのみ使えるらしい。


今後

クリーアーキに寄せてみる

  1. MySQL サーバーから値を読み書きする Driver 層を作る
  2. バックエンドとして API として提供する Rest 層を作る
  3. フロントエンドとして API から取り込むステートを作る

Top comments (0)