今更だけど、Next.jsをさわるんだ!

2 min read

経緯

業務でさわることになり、学習としてアウトプットさせて頂きます。

はじめに

Next.js はReactを基礎としたフレームワークです。そして、Vercel社が提供するOSS プロジェクトになっています。
Webのデプロイ・ホスティングサービス Vercel を運営しており Next.js と Vercel を合わせて使用し、容易にWebサイトを制作することができるようになっています。

SPA (Single Page Application) では,Webサイトへ遷移するとローディングが表示され、次々にコンポーネントが表示されることがあったのではないでしょうか?ユーザの行動や操作に応じてサーバーから取得した情報を、ブラウザ側から実行される JavaScript の制御によって逐次 HTML が書き代わり画面を表示や更新されていたのでしょう。

そこに Next.js が現れました。

SSR(Server Side Rendering) を容易に導入できるようになります。それは最初に表示されるHTMLをブラウザからのリクエストに応じて JavaScript でサーバー側から生成することができるようになったということです。

ですが、静的なHTMLを生成するSSG(Static Site Generation)や静的なHTML生成をブラウザからのリクエストがあった段階で行うISR(Incremental Static Regeneration)といった構築手法も次々に現れてきました。

SPA とは?

SPA(Single Page Application)は、単一のWebページから構成されるWebアプリケーションです。サーバーは最初にアプリケーションの動作に必要なHTML・CSS・JavaScriptなどのアセットをブラウザへ送ります。ブラウザはその上で発生したイベントやユーザーの操作に応じて必要なデータをサーバーにリクエストしながら、画面遷移を行わずにUIを更新していく手法ですね。

SSR とは?

SSR(Server-side Rendering)は、初期状態が初めから適用されたHTMLをサーバー側で構築して送ります。ブラウザはそのHTMLを表示しつつも、それらをサーバーから同時に返されている初期状態をセットしたReactコンポーネントに置換することで、SPAとして動作します。

サーバーサイドのフレームワークでHTMLテンプレートにデータを適用してHTMLを返すような方法と異なるのは、SPAとして動作をしていることですね。

SSG とは?

SSG(Static Site Generation)は、テンプレートにデータを適用し事前にHTMLを生成します。静的ジェネレータのような働きをしてくれます

Next.js は SSRのために存在するのか?

SSRをすることによって、SPAの初期表示速度の改善や検索エンジンから読めるHTMLを送ることによって、SEO最適化やOGP対応(Open Graph Protcol)することが多いのでしょうか?

CI/CD環境に対しての充実されたサポート、HeadlessCMS、開発効率やパフォーマンスに優れたReactプロジェクトをはじめるためには良い選択ともいえるのかもしれません!

また、Next.jsはそれぞれのページの内容が確定するタイミングを判断して、最適なレンダリング方法を提供してくれます。1つのWebサイトの中で、ビルド生成時で内容が確定するページは静的に書き出して、そうでないページはリクエスト時にサーバーから内容を取得するといった分別をしてくれるのです。

Node.jsサーバーの実行環境は必要になりますが、ページごとに違った柔軟なレンダリング方法をサポートするNext.jsの機能を十分に活用した利用方法です。

Next.jsの静的HTML書き出し

next export コマンドを使うと、Next.jsで作ったWebサイトをNode.jsサーバーを通してではなく、静的HTMLファイルとして公開できるように書き出すこともできます。

ディレクトリには次のようにそれぞれのページのHTMLファイルと最適化されたJSファイルなどのアセットが書き出されます。

ディレクトリの内容

.
├── 404.html
├── _next
│   ├── WW134b0dr54Y2ZXchto5h
│   └── static
└── index.html

静的HTMLの書き出しは、Webサイトの公開環境にNode.jsサーバーを必須とせず、すべてのページが事前に書き出し済みであるため、シンプルな仕組みで良好なパフォーマンスを持ったWebサイトを構築できるのですね。

おわりに

レンダリングについて書かせて頂きましたが、次回からはNext.jsの機能について書いていこうと考えています。