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