SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Vercel+Next.jsを活用したWebアプリケーション開発入門

VercelにNext.jsアプリケーションをデプロイする~Vercel上でNext.jsを動かす利点も紹介

Vercel+Next.jsを活用したWebアプリケーション開発入門 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Vercel上でNext.jsを動かす利点

 ここからは、VercelとNext.jsを組み合わせることの利点を紹介します。

 VercelとNext.jsを組み合わせることで、静的アセットとサーバーレス関数で構築されたハイブリッドアプリケーションの最適なソリューションになります。

 Next.jsはVercelによって作成され、以降Vercelと開発者コミュニティによって積極的な保守とサポートがされています。Next.jsのすべての機能はVercel上で設定不要ですぐに利用することが可能です。

 Vercel上で利用できる、Next.jsの特徴的な機能を紹介します。

インクリメンタル静的再生(ISR)

 Next.jsのプリレンダリングには、静的生成(Static-site Generation:SSG)、サーバーサイドレンダリング(Server-side Rendering:SSR)の2つの方式があります(詳しくは、連載の今後の記事で解説します)。

 SSGはページの読み込み速度が最も早い方法ですが、ビルド時間が長いのと、リアルタイムのデータを表示できないというデメリットがあります。

 一方SSRの場合、リアルタイムデータの表示に対応できるものの、動的に毎回ページを作成するため、大量のアクセスがあった場合にパフォーマンスが低下する可能性があります。

 ISRはSSGをユーザーの利用に応じて、一定のタイミングで行う機能です。

 例えば、キャッシュ作成から60秒間経過後アクセスがあった場合、バックグラウンドでキャッシュ更新を行い、ページを更新するという指定ができます。用途としては、多数の商品と最新の在庫と価格を表示しなければいけないECサイト等での利用が想定されます。

 ただし、この設定ではすべてのユーザーが60秒間同じページのキャッシュをみることになります。例えばECサイトであれば商品に間違った値段を設定してしまったり、来週発売予定の商品を掲載してしまい、急いで修正したりしたとしても60秒間は表示され続けてしまうことになります。

 そこで便利な機能として、オンデマンド再検証(On-Demand Revalidation)(ベータ版)があります。特定のページのキャッシュを手動でパージすることができ、先のような急いでページを修正しなければならないユースケースにも対応が可能です。

CDN

 SSGのページと各種アセット(JS, CSS, 画像, フォントなど)は自動で高速なVercel Edge Networkに配置されます。

サーバーレス関数

 Next.jsはSSRとAPIルートを使用しているページは設定不要で、自動的にサーバーレス関数としてデプロイされます。これはAWS LambdaやAzure Functions、Firebaseのようなクラウドサービスを別途用意する必要がなく、Vercel上で、ワンストップでAPIが提供可能なことを意味します。

 さらに、トラフィックに応じて自動的にスケールアップ、スケールダウンがされます。

アナリティクス

 Webページのパフォーマンスなどの状況を、設定なし(ゼロコンフィギュレーション)で解析が可能です。

 プロジェクトの「Analytics」タブにて確認できます。

 左上のReal Experience Scoreはその下にあるFirst Contentful Paint(FCP)、Largest Contentful Paint(LCP)、Cumulative Layout Shift(CLS)、First Input Delay(FID)といった4つの指標からスコアリングされます。

 この例ですとFCPの速度が遅く改善が必要ということが一目でわかります。これらの指標を改善することでユーザーエクスペリエンスの向上が改善することが可能です。

 スコアリングの方法や各指標の詳細はWeb Vitalsをご確認ください。

リアルタイムモニタリング

 サーバーレス関数へのアクセスをリアルタイムで確認できることができます。

 さらに「Show Details」をクリックすることで詳細な情報を見ることが可能です。

コラム:サーバーレス関数を日本に配置する

 サーバーレス関数の配置場所はデフォルトだと海外になっていることが多いです。「Project Settings」にて「Serverless Functions」を選択し、「Tokyo」を選択後「Save」をクリックします。

 デプロイ後に変更したい場合は再デプロイを行う必要があります。デプロイされているプロジェクトのハンバーガーメニューから「Redeploy」を選択します。

まとめ

 今回は、第1回から一歩進んで、Next.jsとVercelを組み合わせて使う方法を紹介しました。Next.jsをVercel上で動かすことのメリットを感じていただけたかと思います。次回からは、ブログを作りながら、Next.jsの便利な機能を紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Vercel+Next.jsを活用したWebアプリケーション開発入門連載記事一覧

もっと読む

この記事の著者

山本 誠樹(サイトコア株式会社)(ヤマモト マサキ)

 サイトコア株式会社 セールスグループ パートナーテクニカルイネーブルメントマネージャー。通信系システムや会員管理サービスの設計・開発から保守まで、システムエンジニアとして様々なプロジェクトに約20年従事。近年はクラウドにフォーカスしたコンサルティングを小売・流通・電力系など業種を問わず行う。201...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16118 2022/08/04 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング