アイソモーフィックJavaScript

13章フルスタックのAngular

Jeff Whelpley

　

2012年12月に筆者はGetHumanに参加しました。そこでの初めての業務は、筆者にとって興味深いものでした。我々の代表的WebサイトGetHuman.com（https://gethuman.com/） を作り替えて、リッチでリアルタイムにすることが目標でした。ここでの課題は、矛盾する（と考えられていた）以下の2つの両立です。

• JavaScriptを使ったクライアント側のWebアプリケーション
• SEOに対応し、パフォーマンスも重視したWebサイト

筆者はどちらにも取り組んだ経験がありましたが、両方同時にということはありませんでした。当時はこれらの要件を満たそうとした場合、RailsのようなアプローチかGUIのないブラウザを使ったアプローチがよく使われました。しかし、これらはいずれも大きな欠点を抱えていました。

Railsのアプローチではサーバー側にWebサイトが用意され、少しのJavaScriptがほとんどのページに散在します。SEO対策もパフォーマンスも申し分ないのですが、クライアント側の高度な機能をまったく利用できないという問題がありました。また、このソリューションは従来のWebサイトとあまり変わらず、我々にとって望ましいものではありませんでした。高速で応答性が高くフルード（流体的）なユーザーエクスペリエンスを我々は求めていましたが、当時はクライアント側が主導するSPAでしかこれらは実現できませんでした。

反対側の極端に位置する例として、BackboneやAngularやEmberあるいは純粋なJavaScriptを使ってクライアント側だけのアプリケーションを作るということが考えられます。このようなクライアント側のアプリケーションを検索エンジンに認識させるには、PhantomJSなどのGUIを持たないブラウザをサーバー側で実行し、アプリケーションのビューのスナップショットを保持することになります。しかし、このアプローチには重大な問題があります。 ...