eコマースシングルページアプリケーション(SPA)に適したホスティングプロバイダーを選択する方法

ストアの運営や在庫管理に一生懸命取り組んでいるときは、Webサーバーの維持が主な焦点ではない場合があります。 SPAのホスティングは、サーバーから静的なHTMLサイトを提供するよりも少し複雑です。

幸いなことに、eコマースSPAへの傾向は、ウェブアプリケーションと静的ウェブサイトを実行するオールインワンホスティングとサーバーレスバックエンドインフラストラクチャプラットフォームのまったく新しい市場を生み出しました。 そのようなプラットフォームには、Netlify、Vercel、AWS、Firebase、Layer0（現在のEdgio）が含まれます。 この記事では、複雑なeコマースSPAをホスティングするための適合性の観点から、それらがどのように比較されているかを見ていきます。

SPAはどのように機能しますか。

SPAが特別なホスティング処理を必要とする理由を完全に理解するには、これらのサイトがどのように生成され、プロセスに固有の課題があるかを知る必要があります。

SPAでは、サーバーはブラウザ内のHTMLコード（DOM）を動的に変更または操作するための多数のJavaScriptを含む1つの基本HTMLページのみを返します。 ただし、セキュリティ上の理由から、サーバはプロセスにまだ関与しています。 クライアント側のJavaScriptコードは、データベースに直接接続することはできません。これは、アクセス資格情報などの機密データが公開される可能性があるためです。フロントエンドのJavaScriptコードを隠すことはできません。

UIの更新プロセス全体は、ブラウザで行われます(クライアントサイドJavaScript経由)。 これにより、モバイルアプリのようなユーザーエクスペリエンスが提供され、速度が向上します。 更新や変更はほぼ瞬時に行われ、ユーザーは新しいページが読み込まれるのを待つ必要はありません。 もちろん、アプリは時々データを必要とするため、そのデータが舞台裏でフェッチされるまで(例えばAJAX経由)、またはページが空にならないようにスケルトンを要素に事前に挿入するまで、一種の読み込みアニメーションを表示できます。

JavaScriptでクライアントサイドのHTMLページ全体を動的に更新するには、多くのJavaScript命令が必要です。通常、フレームワーク(React.js、Angular、Vue.js)またはライブラリを使用して処理します。 Angular、React、Vueのウェブサイトのパフォーマンスを比較するには、こちらのブログ記事をお読みください。

シングルページアプリケーションとJamstackの混同

シングルページアプリケーションは、単一の静的HTMLページをロードし、ユーザーが操作するたびに新しいコンテンツで動的に水和するWebアプリケーションです。 SPAは静的ページとJavaScriptと軽量APIを組み合わせているため、セットアップはJamstackと見なすことができます(名前はJavaScript、API、Markupのマッシュアップです)。

JamstackとSPAの重複は重要で、一見すると少し混乱しますが、いくつかの違いがあります。 たとえば、すべてのSPAがキャッシュから直接コンテンツを提供するわけではありません。 SEOとパフォーマンスを向上させるために、多くの最新のSPAは、同型フレームワーク(別名ユニバーサルJavaScript )上に構築されています。これにより、サーバーサイドとクライアントサイドの両方のレンダリングを利用して、サイトの速度を高速化し、SERPランキングを向上させることができます。

Jamstackは、クライアント側とサーバー側のコードの分離を促進するため、同型(またはユニバーサルJavaScript)設計とは一致しません。Jamstackは、追加機能をAPIに依存することを奨励していますが、データの消費と解釈の方法を完全にAPI制御することは推奨していません。 JamstackフロントローディングAPIでは、ビルド時に消費とコンテンツの取り込みを推奨します。 必要に応じて、サーバーレス関数でも実行時にAPIを利用できるようにすることができます。

Jamstackは、従来のSPAと比較していくつか改善された、プリレンダリングされたHTMLサイトの生成を容易にします。 すべてのページはビルド中に静的ページとして構築され、これらのページは簡単にキャッシュ可能なため、最終的にはCDNがサーバーではなくWebサイトを配信することになります。 このアプローチは、SPAが最初にコンテンツを表示する要求を行う必要があるため、ホストするのに安価で高速です。 「静的」なJamstackを容易にする一般的なフレームワークには、Nuxt.js、Next.js、Eleventy、Gatsbyがありますが、それぞれが少し異なります。

• Eleventyは主に事前生成されたHTMLを出荷しています。
• Nuxt/Next/Gatsbyなどは通常静的HTMLを出荷し、JavaScriptが読み込まれるとページをSPAに変換する。

Layer0などのホスティングプラットフォームもあり、同じ目標とさらに優れた速度を実現します。 アプリケーション対応CDNを使用すると、Edgioは95%以上の時間で動的データをエッジでキャッシュできます。これにより、静的なJamstackサイトの場合と同様に、CDNのみに存在する配信プロセスでサーバーを排除できます。 これは動的なJamstackです。

SPAの主な課題

SPAは、主にパフォーマンスの向上により人気を集めています。 しかし、SPA Webサイトの設計、つまり、すべてのUIの更新とブラウザでのコンテンツのレンダリングを処理することも、特定の制限につながります。

スパはSEOには適していない

SPAの最大の欠点はSEOに接続されています。 検索エンジンは、空のHTMLコンテナを超えるコンテンツを理解しません。 一部のクローラ（Googleのような）は現在、JavaScriptを解釈してページがレンダリングされるまで待つことができるとされている。 それでも、2014年以降、JavaScript SEOに関する信頼できるソースはすべて、JSのクロールにGooglebotを頼らないようにと常に言っています。 コンテンツを同期的にロードするとクロールされます。非同期的にロードされるコンテンツはクロールされません。

パフォーマンス

SPAの初期ロードは静的サイトよりも時間がかかります。これは、ブラウザが画面にレンダリングされる前にJavaScriptの大きな塊をダウンロードする必要があるためです。 コードは解析して実行する必要があり、ウェブサイトのパフォーマンスに悪影響を与えます。 ただし、このコードには後続のページのアセットも含まれているため、SPAのブラウジングトランジションは非常に高速です。

JavaScriptフレームワークの中には、SPAのパフォーマンスの問題に対処する方法を持っているものもあります。

• Next.jsは、サーバーサイドレンダリングを使用して、リクエストごとにページをサーバー上のHTMLに「変換」します。 これには最初のバイトまで長い時間がかかりますが、データは常に最新です。
• Next.jsは、静的なサイト生成を使用して、リクエストの前にサーバー上のHTMLにページを事前レンダリングします。 HTMLはCDNによってグローバルにキャッシュされ、即座に提供されます。

理想的には、ホスティングオプションには上記の課題を解決する機能が必要です。

シングルページアプリケーション、プログレッシブWebアプリ、高速モバイルページは、顧客体験を向上させることができます。 ただし、Webサイトの速度は、ブラウザ、エッジ、サーバーに関係するフルスタックの問題のままです。 Webサイト、SPA、静的な複数ページアプリケーションを高速化するには、フルスタックソリューションが必要です。

eCommerce SPA向けの高性能ホスティングソリューションは、次のようなメリットを提供します。

CMSから取得したものでも組み込みテンプレートから取得したものでも、入力コンテンツから静的HTMLページを構築する静的サイトジェネレータ。

サーバーサイドレンダリング—SPAの場合、サーバーサイドレンダリングは少し面倒ですが、一部のイニシアチブではそのプロセスが少し簡単になります（詳細については後述）。

一般的なeコマースSPA Webサイトをホストする方法
以下では、SPAの一般的なホスティングオプションを詳しく説明し、SPAのWebサイトに固有の一般的な課題にどのように対処するかについて説明します。

1.ホスティング大手：Google Cloud Platform、Azure、AWS

Google Cloud Platform、Azure、AWSは、今日のクラウドサービスの基本となっており、非常に似た機能ラインナップを提供しています。 ビッグ3の各プロバイダーには、世界中のPOP、サーバーレスJavaScript、ブランチプレビューや無制限のロールバックなどの開発者向けのいくつかのグッズが含まれています。 差別化はあまりありません。 たとえば、AWSでサイトをホストするには、静的アセットの保存にAmazon S3、CDNにAmazon CloudFront、サーバーレス関数APIにAPI Gatewayを備えたAWS Lambdaが必要です。

これらのサービスは、中間プロバイダの新しい波がサービスを構築するための基盤です。 VercelやNetlifyのような企業は、本質的に追加機能を追加することでマークアップ付きのAWS / GCP / Azureサービスを再販しています。

Layer0がBUNCHと異なる点は、プラットフォームが、eコマースSPAや旅行ウェブサイトなどの大規模なAPIベースのウェブサイトに、最も簡単で信頼性が高く、パフォーマンスの高いホスティングを提供するためにゼロから構築されていることです。

2.ネットリファイ

Netflifyは、Jamstackのセットアップの定義に適合しています。 Netlifyは、静的なJamstackホスティングソリューションとサーバーレスバックエンドサービスを提供するクラウドコンピューティング企業です。 導入プロセスは簡単です。 これにより、インフラストラクチャの管理の手間が省け、開発チームはコーディングに集中できます。

HTTP/2標準、HTTPSがあり、ウェブサイトはCDNを介して提供されます。 Netlifyには多くの機能とアドオンの豊富なエコシステムがあります(例:サーバーレス機能、インスタントフォーム、アイデンティティ、分析など)。 独自のアドオンを作成することもできます。

Netlifyは確かなカスタマーサポートを提供し、問題が発生した場合に相談できるユーザーのコミュニティに支えられています。

開発者向け機能

Netlifyは、生産性を向上させるソリューションを提供することで、開発者の生活を簡素化するよう努めています。

Netlify Devは 、開発者がサイトジェネレーター、API統合、サーバーレス機能、エッジルールを1台の開発サーバーでローカルにテストできるようにすることで、生産性を向上させます。

Netlify Build を使用すると、開発者はGitワークフローを使用して開発を行うことができ、コミットごとに一意のURLを使用して変更をデプロイするという継続的なデプロイが可能になります。

Netlify Edge は、Webアプリの配信ネットワークです。 開発者は、開発ワークフローに接続して、複雑なタスクを処理したり、カスタムロジックを実行したりすることができます。 通常のCDNに似ていますが、よりスマートで迅速な方法で、プロジェクトのアーティファクトを世界中の場所に伝播します。

Netlifyサーバーレス関数

Netlify Serverless関数を使用すると、JavaScriptまたはGo APIを記述して、バックエンドタスクを実行し、需要の増加に応じて自動的にスケーリングできます。 AWS Lambdasを独自に設定するのはかなり複雑ですが、Netlifyのサーバーレス関数は比較的簡単です。AWS Lambdaを舞台裏で使用しますが、抽象化するため、API Gateway、IAMロール権限、高度なAWSボイラープレートに触れる必要はありません。

Netlifyのフリー層

Netlifyはまた、上記の利点の多くを提供する実質的に無制限の無料ティアを提供しています。

三ベルセル

Vercel（以前は.sh、NowまたはZeit）はNetlifyと同様のサービスを提供しているが、ゼロ構成デプロイメントを強調しており、これを従来の完全な下位互換性のあるデプロイメントアプローチと呼んでいる。 複数のフレームワーク(Gatsby、Vue、Ember、Svelteなど)で動作します。 ビルドスクリプトを使用してpackage.jsonプロジェクトをアップロードすると、完全な静的レンダリングまたはハイブリッドレンダリングをすぐに使用できます。

VercelはNetlifyと同様のエクスペリエンスを提供します。Gitリポジトリに接続し、継続的なデプロイのメリットを享受できます。つまり、コミットごとに一意のURLを使用して変更をデプロイします。

Vercelサーバレス関数

ヴェルセルは、AWS Lambdaを内部で利用するサーバーレス機能を提供しています。 より多くの言語と地域がサポートされているため、Vercelの提供はNetlifyからの一歩です。

Vercelは、静的資産とは別にサーバーレス関数応答をキャッシュできる堅牢な配信ネットワークも提供しています。

AWS Lambdaをベースにしていますが、VercelはAWSのフォーマットを使用するNetlifyとは対照的に、ハンドラにカスタム関数シグネチャを使用することにしました。

4.レイヤ0（Edgio）

Layer0(Edgio)は、SPA Webサイトの動的なJamstackを有効にするための完全なソリューションであり、即時ロードと開発が容易になります。 高度な最適化技術を組み合わせることで、eコマースSPAなどの大規模なデータベース駆動型Webサイトを高速化し、コードをワークフローの中心に置くだけで開発者が1週間に1日を取り戻すことができる強力なツールを提供します。 Edgioは基本的に、Jamstackを大規模なeコマースWebサイトにもたらします。

Edgioには、アプリケーション対応のCDN-as-JavaScriptが付属しています。このCDN-as-JavaScriptは、現在のCDNを拡張または置き換えることができ、必要なすべてのWebセキュリティ機能をエッジに提供します。 Layer0には、開発に特化した多数のテクノロジーが搭載されており、開発、導入、プレビュー、実験、監視、 また、自動フルスタックプレビューURL、フロントエンド用のサーバーレスJavaScriptバックエンド、高度なキャッシュ監視など、ヘッドレスフロントエンドを簡単に実行できます。

Layer0 ❤ 開発者

Edgioは、SPAの導入を 迅速 かつ シンプルにします。

Edgioは、最新のSPA eコマースフロントエンドと、エッジでの動的コンテンツ用の95%キャッシュヒット率を持つCDN-as-JavaScriptと、フロントエンド用のNode.jsバックエンドを組み合わせることで、複雑なWebサイトがスタック全体の速度を最適化できるように支援します。 Layer0（現在のEdgio）は、大規模なeコマースWebサイトのコンテンツペイント（LCP）時間の中央値を保証する唯一のプラットフォームです。

NetlifyやVercelと同様に、Layer0(現Edgio)を使用すると、開発者はGitワークフローを使用して開発を行うことができ、コミットごとに一意のURLを使用して変更をデプロイするという継続的なデプロイが可能になります。

Edgioは、開発、導入、プレビュー、実験、監視、 SPA eコマースフロントエンドを実行すると、次のことが可能になります。

• 事前レンダリングとジャストインタイムレンダリングの両方を使用して、eコマースにJamstackを活用
• 製品カタログAPIからデータをプリフェッチすることで、ゼロレイテンシネットワーキングを実現
• アプリケーションでEdgeをネイティブに構成する（cDN-as-JavaScript）
• エッジルールをローカルおよび本番前の環境で実行
• 新しいブランチとプッシュごとに、GitHub、GitLab、またはBitbucketからプレビューURLを作成します。
• パフォーマンスの高いA/Bテスト、カナリア展開、パーソナライゼーションのためにエッジでスプリットを実行
• AWS Lambdaよりもはるかに簡単で信頼性の高いサーバーレスJavaScript

Layer0がNetlifyやVercelと異なる理由

NetlifyとVercelは静的なウェブサイトに焦点を当てている。 これらは静的である可能性のある小規模なサイトに適していますが、Edgioは大規模で動的で頻繁に変更され、複雑なサイトに特化しています。 この区別は、eコマースSPA Webサイトをホストする効率的な方法を探している場合は特に重要です。

さらに、NetlifyとVercelにはサポートできるページ数に制限があり、クライアントのページ数は平均して少なくなっています。 一方、Edgioは数百万ページのサイトをサポートしています。

数千ページで構成される複雑で動的なWebサイトでは、ビルド時に「静的」ページを作成すると、ビルド時間が飛躍的に増加し、わずかなデータ変更があるたびにビルドが必要になります。 プレレンダリングでは、数千のSKU、A/Bテスト、動的な価格設定、リアルタイムの在庫検索、プロモーションを備えた動的なeコマースWebサイトには効果がありません。 サーバーレスJavaScriptは、CDN-as-JavaScriptのエッジで一貫してキャッシュされた、オンザフライでインラインレンダリングされたサーバーサイドのコンテンツを処理できます。

これこそ、Edgioが競合するインフラストラクチャ製品に対する主な優位性を示し、動的なJamstackの原則を機能させている点です。 CDN-as-JavaScriptサービスワーカーは、訪問者がリンクをタップする前に動的ページをインテリジェントに取得します。 当社のネットワークおよび監視ツールは、動的データが少なくとも95%の時間キャッシュされることを保証し、プリフェッチによって作成される追加の要求からデータベースを保護します。

Edgioの開発および展開プロセスは、開発者をプロセスの中心に置き、メンテナンスプロセスを簡素化しながらすべての制御を提供します。