【体験記】Next.jsとNotionでJamstackブログを作る

この記事では最近注目を集めているJamstackの構成でブログを構築する過程(主に要件定義から技術選定まで)をまとめています。わかることは下記の内容です。

サイト制作初心者でもわかりやすいようになるべく噛み砕いて説明しているのでぜひ読んでみてください。

Jmastackとはなんぞやという説明の前に、自分がこの構成のサイトが作るに至った背景を説明します。

このような自分の理想とするサイトを実現しようとすると、Wordpressのような既存の技術では不十分な点があったのです。

Jamstackとは、静的サイトと動的なサイトの特徴をあわせ持ったシステム構成のことをいいます。

この「Jam」という言葉は次の用語の頭文字をとって作られた造語です。

Jamstackではページを表示するためのHTMLファイル(マークアップ)を事前に生成しておき、ユーザからのリクエストが来たらそれを表示します。これが静的な特徴です。

一方で動的な機能は、JavascriptやAPIを使うことによって実現することができます。

このJmastackの構成によって主に次のことが実現可能になり、場合によっては従来の構成よりも多くのメリットを得ることができます。

それぞれ詳しく説明していきます。

先述したようにHTMLを事前に生成しておくことで高速表示が実現できます。動きがサクサクしていれば、ユーザから良い印象をもたれ離脱率の低減、またクローラー対しても高い評価が得られるためSEOに大きな効果が期待できるでしょう。

Jamstackではエックスサーバーのようなレンタルサーバーを契約し高額な費用を払う必要がほとんどの場合ありません。CDN (Contents Delivery Network)と呼ばれるコンテンツ配信サービスと契約することで、個人から中規模レベルのサイトであれば無料枠の範囲内で運用することが可能です。

Jsmstackのサイトでは、サーバやデータベースとのやり取りを頻繁に行う必要がありません。なぜならCDNによってサイトがインターネットに公開される前の段階でこれらのやり取りはほとんどの場合完了しているからです。

したがって、ブラウザからサーバやデータベース直接アクセスできず、攻撃者から狙われにくくなります。

ブラウザに表示される部分とサーバやデータベースが切り離された構造になっているため、Jamstackでは複雑なサーバ管理/インフラ整備が不要になります。

そのため必要に応じて柔軟に構成や技術要素をカスタマイズすることが可能で、システムのスケーリングが比較的容易です。

次にサイトのシステム構成を確認していきます。一般的なWebサイトを構築する場合、そのシステムは主に2つの要素に分けることができます。

さらにCMSはユーザーにコンテンツを表示する役割がある「ビュー」と、コンテンツの管理をする部分で構成されます。サイト制作でよく使われるWordpressはCMSであり、ビューとコンテンツ管理部が一体となったものです。

またホストはサイトをインターネット上に公開し運用する役割を担う部分で、「エックスサーバ」や「ロリポップ」などのレンタルサーバが主に使われます。

一方、Jamstackではこれらのビューとコンテンツを管理する役割の部分を分離して考えます。

この場合、ビューが切り離された(あるいは最初からビューがない)コンテンツ管理部分をヘッドレスCMSと言います。

今回は上記のようにビューをNext.js、ヘッドレスCMSをNotion、ホストをVercelとしてブログサイトを作成していきます。

この構成にすることで次のようにブログ管理者とユーザ双方がメリットを得ることができます。

人気のメモアプリ「Notion」をヘッドレスCMSとすることで、メモ書きから即記事を起こすことができるようになります。今まではメモ帳に書いた内容をWordpressにコピペしていたのでこの時間が短縮されます。

Wordpressではブラウザを起動→ログイン→記事投稿ページ表示→個別記事を選択と手順が多かったので記事作成のハードルがぐーんと低くなりました。

コンテンツをホスト側で事前に生成しておくことで高速速度を実現します。ちなみにGoogleのデベロッパーツール「Lighthouse」でパフォーマンスを測ったところ97点の高得点でした。

※ 記事のテキストは高速表示されるものの、画像が表示されない場合があることが後ほど判明しました。これはNotionの仕様で画像の取得後1時間の有効期限があることと、後述するISRという表示の仕組みの相性に原因があるようです。この点については現在構成を見直し、解決策を検討中です。

今もなおWordpressはさまざまなサイトで使われており根強い人気があります。それはやはりメリットが大きいからでしょう。

それでは具体的にWordpressサイトのメリット・デメリットはどんなものがあり、Jamstackサイトとの違いが何なのか整理していきます。

などがあります。このような特徴があることからサイト立ち上げの初心者や、情報の更新頻度が高いサイトにWordpressはマッチしています。

ここではJamstackの方がWordpressより優れていると言いたいわけではありません。

やはりJamstackの構成はエンジニアがいないと運用していくことは実質的に不可能なので、エンジニアがいない環境下ではWordoressの需要は残り続けると思います。

また、WordpressをヘッドレスCMSとしてJamstackの構成に組みこむことも可能で、JamstackとWordpressは決して相反するものではないということは注意書きしておきます。

JamstackではSPA、SSR、SSG、ISRの技術要素の中から必要に応じて複数を組み合わせて構成されます。

アルファベット三文字でややこしく感じますが、それぞれ以下の図を見るとその違いがよくわかるかと思います。

SPAではHTMLをブラウザ側でレンダリングします。初回はサーバーにHTMLをリクエストし、2回目以降のリクエストでは差分のみを返すので読み込み時間が短縮でき、高速表示が可能になります。

SSRではリクエストがあるたびにサーバー側でHTMLを生成します。そのため、コンテンツを常に最新の状態に保つことができるというメリットがあります。

しかし、コンテンツのキャッシュが難しくCDNを使っている場合と比べ速度が遅い、サーバーへの負荷が大きいなどのデメリットがあります。

あらかじめサーバー側で静的なHTMLやCSS、Javascriptを生成し、CDNに登録しておきます。そのため表示速度が初回だけでなく2回目以降も高速です。

あらかじめコンテンツを生成しておくということは更新頻度が多いサイトの場合、古いコンテンツを表示してしまう可能性があるということになります。

そのため、一日一回以下ほどの更新頻度のブログやサイトに向いた仕組みになります。

SSRとSSGの良いとこどりをした仕組みがこのISRです。

SSRと同じようにクライアントからリクエストがあった時にCDNでページを生成しますが、2回目以降のリクエストでこれを再利用します。

SSGの場合あらかじめ全てのページを生成するため、ページ数が多いと生成に時間がかかるという問題がありました。

ISRではリクエストがあるまでページを生成しないためCDNの立ち上げが高速になります。本ブログではこのISRを記事一覧表示や個別記事表示などに利用しています。

Jamstackの構成では次のようなHostingサービスがよく利用されるます。

本ブログではNext.jsの公式が運営しているVercelを利用することにしました。やはりNext.jsとの相性の良さが理由です。

先述したようにこれらのJamstackのホスティングサービスは無料枠の範囲内で十分使えるものが多いので、サイトのランニングコストを実質ゼロに抑えることができます。

すべて一から作るのは途方もない時間がかかるので、今回はスターターキットを利用することにしました。

下記のUdemyの講義で作ることができる成果物をベースに使わせてもらいます。

https://www.udemy.com/course/notion-next-blog/

またNotionでテキストのブロックを取得した後、ブラウザでレンダリングするためのライブラリnotion-block-renderingもあわせて使用させていただきました。

スターターキットの機能

こちらの機能に加え、さらに次の機能を実装していきます。

※執筆時点でまだ実装できていない機能もあります。おいおい更新していきます。

今回紹介したのはJamstackの構成はほんの一例に過ぎません。ユーザが見やすくかつ、私個人が使いやすいブログを目指した結果このような構成になりました。

ビュー、ヘッドレスCMS、ホストはそれぞれ独立していて自由に組み合わせることができます。今回はそれぞれNext.js、Notion、Vercelでしたが、自分の好きな構成で作ってみると面白いと思います。

ヘッドレスCMSとして他にmicroCMS、Contentful、GraphCMS、Strapiなどがあります。またビューとして、Gatsby、Nuxt.jsなどが候補にあります。

Jamstackはまだ発程途上の概念なので、これからまだ新しい技術要素が登場することもあれば、廃れる可能性もあります。

もしかしたら将来的に本サイトの構成を見直すこともあるかもしれません。