高速Webサイト (JAMstack)


ライジンでは、Webサイトの開発にJAMstackの技術を使ってます。

Webサービスの開発と業務

  • Webサイトの企画書作成
  • 技術設計
  • ページやユーザーインターフェースのデザイン
  • 画像制作
  • HTML/CSSコーディング
  • サーバ側(バックエンド)プログラミング
  • クライアント側(フロントエンド)プログラミング
  • カスタムドメイン、SSL設定
  • テスト
  • 機材や回線の調達・導入
  • ネットワーク設定
  • サーバ管理
  • システム運用
  • プロモーション(Webマーケティング)
  • 顧客サポート

Jamstack技術を使ったWebサイトとは

多くの場合、Jamstackは非常に高速になります。

ブラウザでの最初のリクエストから始めて、静的ホスティングからサイトを配信するとき、その最初のレスポンスを遅くする可能性のある高価なサーバー側プロセスを回避します。
通常、静的ホスティングを提供する場合、その要求はコンテンツ配信ネットワーク(CDN)に対して行われます。つまり、世界中のサーバーからファイルを要求する代わりに、訪問者は自分に近い場所にその要求を行うため、待機に必要な時間が短縮されます。
HTMLがブラウザーに入ると、通常、プレーンHTMLである完全に生成されたページが提供されます。つまり、ブラウザーで最初のエクスペリエンスをレンダリングするために、サイトは多くの作業を行う必要がありません。
ページの読み込み後、Next.jsのようなフレームワークを使用している場合、フレームワークは、クライアント側のルーティングや、のインテリジェントな予測に基づくコンテンツのプリロードなど、訪問者がWebサイトで費やす残りの時間のパフォーマンス上の利点を自動的に提供します。次にアクセスするページ。
これらすべてがまとめられているため、訪問者は最初の読み込みからアプリに費やした時間全体まで、迅速なエクスペリエンスを得ることができます。これにより、顧客は満足し、ウェブサイトにとどまってコンバージョンを達成する可能性が高くなります。

Jamstackアプリは信頼性が高く、拡張性に優れています

サーバーフルソリューションを管理する上での最大の問題点の1つは、サーバー自体です。プロジェクトでページを処理およびレンダリングするためにサーバーが必要な場合は、サーバーが常に利用可能であり、数百万とまではいかなくても数千のリクエストを処理することに依存しています。
通常、そのトラフィックの流入を管理するには、最初に限界点に到達してそれについて考えるまで待つか、自動スケーリングなどの機能を設定します。静的ホスティングでは、各リクエストが静的ファイルを返すため、サーバー側のリクエストと同じ処理のニーズに依存することはありません。Webサイトまたはアプリケーションは「無限に拡張」でき、基本的にWebサイト自体のダウンタイムをゼロにします(プロバイダーのダウンタイムは別として)。プロジェクトにヒットしたリクエストの数に関係なく。
また、Webサイトにアクセスした人と、その要求に応答しているサーバーとの間の潜在的な障害点を減らしています。ロジックを解析してHTMLをレンダリングする必要がないため、静的なドキュメントをブラウザに直接返すだけです。
ダウンタイムがほとんどなく、必要な数の顧客に拡張できるWebサイトまたはアプリケーションを用意することで、ビジネスをいつでも利用できるようにし、より多くの収入をもたらしたり、会社につながる可能性があります。

Jamstackアプリは通常より安いです

すべてのビジネスオーナーが見たいと思うものは、より低い請求書です。コストはプロジェクトの設定によって異なりますが、Jamstackに移行した後、全体的なコストが大幅に低下したことを示す例が圧倒的に多くあります。
静的ホスティングは本当に安いです。静的ホスティングからウェブサイトのコアにサービスを提供するということは、使用する時間とリソースの計算にお金を払うのではなく、リクエストごとにダウンロードされるデータの量にお金を払うことを意味します。Webプロジェクトに関しては、大きなファイルを提供している場合やサイトが極端に肥大化している場合を除いて、ファイルは小さい可能性が高く、リクエストごとにそれほど費用はかかりません。

前述のように、これは確かにプロジェクトに依存します。使用するサービスの数やアプリケーションのバックエンドで実行していることによっては、まともなサイズの請求が発生する可能性がありますが、より効率的にサービスを提供できる集中的なAPIやサービスを扱っている可能性があります。

ヘッドレスを採用するデメリット

フロントエンドに静的技術しか使えないので、OGP、お問い合わせフォーム、サイト内検索、コメント、レビューなどの動的要素を使った機能がある場合どう置き換えるか検討する必要があります(それぞれ代替手段はあります)。

JAMStackなWebサービスについて

運用・開発・デプロイ環境の構築方針

  • ホスティング(Platform):Netlify
  • 静的サイトジェネレーター(Static Site Generator):Hugo、Gatsby、Next.js、Sanity
  • ヘッドレスCMS:Strapi、NetlifyCMS、
  • リポジトリ(ソース管理):GitHubリポジトリのリモートリポジトリ
  • ローカルの開発:WSL2+Linux+hoge

Webサイト開発について、気軽にご連絡ください。