LoginSignup
0

More than 5 years have passed since last update.

メモ:Next.js

Posted at

Next.js

= 主な特徴
コンポーネントが自動でサーバーレンダリングされ、スクリプトはインライン化されるるので読み込み速度が早い(SEOフレンドリー)
Next.js内のすべてのルートは、React.Componentを継承したクラスや関数をエクスポートしたES6モジュールなので、システム全体でコンポーネントの組み合わせが容易で再利用性が高い(composable)。
例:コンポーネントを直接レンダリングしたり、読み込んで他のトップレベルのコンポーネントによってレンダリングすることが可能。

  • デフォルトでサーバレンダリングする
  • より早いページローディングを可能にする自動コード分割
  • ページベースのシンプルなクライアントサイドルーティング
  • HMR(Hot Module Replacement)をサポートする
  • Expressを含むNode.js のHTTP serverの実装が可能
  • 各開発者独自のBabel やWebpack のコンフィグ設定が可能

= Next.jsの6つの原則
- ファイルシステムをAPIで利用するので、セットアップを必要としない
- JavaScriptのみで記載する。全て関数とする。
- 自動化されたサーバレンダリングとコード分割
- データ取得は開発者に委ねる
- 効果的な事前結合とコンパイル予測(不必要なサーバー読み込みやデータ取得することなく、バックグラウンドでコンポーネントのJSONデータを事前取得する)
- デプロイがシンプル

= Next.jsの強み
- タグがServiceWorkerを経由して、バックグラウンドでコンポーネントのJSONデータを事前取得するので
ネットワークの状態にかかわらずユーザに即時アップデートが可能

  • システム全体が組み立て可能(composable)でテスト可能(testable)であるので、様々な状況において組み込み可能な状態であり、それぞれのコンポーネントを組み合わせたり分解が容易。つまり、UIが構築しやすく改修しやすい。
    コンポーネントを直接レンダリングしたり、読み込んで他のトップレベルのコンポーネントによってレンダリングすることが可能。

  • アプリのビルドをより小さな結合ファイル(bundle)へ分割したサーバーレンダリングが可能

  • componentが もしくはrouterから直接ロードされる際に、スクリプトを含むJSONベースのページ表現を行う。
    つまり、各々ページに固有のimportリストを記述することが可能なので、ページごとに異なるcomponentを利用する必要がある場合にも、特定のページが他のページのパフォーマンスに影響を与えることがない。

  • 静的JSXのサーバサイドレンダリングが可能なのでローディングが早い。
    クライアントサイドのルーティングにより、サーバサイドレンダリングとダイナミックレンダリングで異なるデータフェッチ(レンダリングの高速化)が可能。
    またデータを専用のメソッド(getInitialProps)により取得する為()、不必要なサーバー読み込みやデータフェッチすることなく事前取得することが可能(レンダリングの高速化)。
    サーバーとクライアント間のコード共有する方針をとることで、Nodeで実行する際やChromeやBraveで開発する際にパフォーマンスが良い。
    トランスパイルする機能の選択はv8をターゲットとする。

Source: https://zeit.co/blog/next

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0