NUXT+Contentful+AFrame+Netlifyでホームページを更新しました

スクールのオープンから約2年が経過しました。忙しさにかまけてホームページを更新できなかったことを反省し、心機一転作り直すことにしました。もともとのページはWordPressで実装していましたが、せっかく作り直すのだから新しい要素を取り入れようと以下のような前提で構築することにしました。

前提

  • NUXT.jsでSSR(Server Side Rendering)
  • コンテンツはContentfulで管理
  • サーバはNetlifyを使用して、GitHubと連携
  • Responsive(スマホ・タブレット・PCで閲覧可能)
  • Sendgridを使ってメール送信
  • aframe.ioを使って360度画像を表示

SSR (Server Side Rendering)とは

簡単にいうと「WebサーバでHTMLページを生成し、それをブラウザに返すこと」です。実はcgi, ASP.NET, servlet, PHPといった今までのWebサーバはサーバ側でHTMLを生成して、それをブラウザに返していました。SSRという概念は以前から普通に存在していました。特に珍しいものではありません。
SSR

最近、Angular, React, Vue.jsといったフレームワークが普及してきました。これらのフレームワークはクライアント側でJavaScriptを実行することで動的にページを構成することが特徴です。1ページでコンテンツを作ることも珍しくなく、SPA(シングルページアプリケーション)と呼ばれたりします。
SPA vs MPA
SPAはアクセス初回時は多少ダウンロードに時間がかかるものの、一旦ダウンロードしてしまえばあとは快適です。途中で内容を更新するときはページを取得するのではなく、必要なデータだけをAjax通信で取得します。クライアント側で描画・更新・ページ遷移などの処理を行うため、サクサクとした操作感を実現できます。しかも、フレームワークを使っての実装は、従来のようにjQueryを使ったり、DOMを直接操作したりする必要もないため、機能の実装に注力できます。
SPA

SPA(Single Page Application)の弱点

良いこと尽くしのように思われるSPAですが、苦手というか弱点があります。SPAでは最初のページはJavaScriptのかたまりで、そのJavaScriptが必要なデータを後で取りに行くのが一般的です。Googleなどの検索サイトは、Webクローラと呼ばれるプログラムを使ってWebページを収集しますが、SPAの場合、そのウェブページは単なるJavaScriptのプログラムで、コンテンツが含まれていません。そのため、SPAは検索エンジンに見つけてもらいにくいという問題があるのです。

SSRの本領発揮

おそらくこのような背景があり、再びSSRが注目を浴びてきたものと思われます。今回はVue.jsを使ってホームページを作成することにしましたが、Vue.jsでサーバサイドでWebページをつくる技術がNUXTです。NUXTはVue.jsの利点を享受しつつ、SSRを実現できるという優れものです。

今回のHomepageを作成するときの気づきをこれからまとめてゆきます。