コーポレートサイトとECサイトの一部をNext.jsでJAMStack化し高速化した話
三行まとめ
- 坂ノ途中の技術ブログはじまります
- WordpressのヘッドレスCMS化とNext.jsによるJAMstack化を採用しました
- ヘッドレスCMSは速度改善でき、これからのCMS運用の標準になるかもしれません
こんにちは。「100年先も続く、農業を。」というビジョンを掲げ、環境負荷の小さい農産物の流通やコーヒーの輸入・加工などに取り組んでいる坂ノ途中の片山です。機運が高まってきたので技術ブログをはじめます。
会社紹介
ぼくたちは、環境負荷の小さい農業を広げるために、少量だったり不安定だったり、けれど美味しいお野菜を流通させる仕組み、多様性を排除しない流通の仕組みをつくることをめざし、生産者さまからお野菜を仕入れて個人のお客さまや飲食店さまや小売店さま向けに野菜を販売しています。 そのためにさまざまなシステムを開発していますが、そのなかでもECサイトは個人のお客さまとの接点であり重要なプロダクトです。 世の中のECとの違いとして、定期宅配をサポートし、スキップや日程変更などを柔軟にできるようにしつつ、単品の商品も定期便に同梱できるようにしているのが特徴でパッケージなどを使わず自前で開発しています。
第一回として、このWebショップ（以下ECサイト）のアーキテクチャ変更についてお話しします。 今回のプロジェクトは、レンタル移籍という仕組みでさる大企業からやってきた植木快さんによる取り組みによるものです。かれは昨年4月から10月までこのプロジェクトを立ち上げて離陸までさせましたが、みなに惜しまれつつ涙の帰任を果たしたので代わりに紹介させていただきます。
旧環境とその課題
まず、ぼくたちのECサイトはこれまで、トップページや読み物などのあるいわゆるコーポレートサイト部分をWordPressで構築し、お届け先選択やマイページなどのカート部分はRuby on Railsで開発していました。デザインを共通にしているため、お客さまはどこからRailsかは気にしないことでシームレスに読み物を読んだりお買い物をすることができます*1。
WordPressというとレガシーでは？いまどきまだ使ってるの？というお声もあるかもしれませんが、2位のShopify以下に大差をつけて世界でもっとも使われているCMSです*2。ホワイトハウスでも2017年末から利用されており*3、多数のpluginが提供され慣れている編集者やライターや開発会社も多く普及しているプロダクトです。ぼくたちも仲の良い開発会社さんにデザインから構築までお願いしていました。
しかし、WordPressはページの表示速度やバージョン管理やデプロイに課題があったり、攻撃対象にも選ばれやすいほか、テーマをさくっとつくるとすぐにコードのViewとロジックが深く結合してしまうなどメンテナンス性や改善速度に課題があります。
特にページ表示速度はUIの重要な要素です。 ページ生成までの処理が全体的に重いことが課題となっており、このTTFB短縮がパフォーマンス改善における最重要課題でした。 しかし、オンラインショップは商品の在庫数、販売可否、ログイン状態やカート状態に応じて表示を出しわける必要があり、すぐにCDNを導入することが難しい状況でした。
JAMstackアーキテクチャの採用
これらの状況ではコーポレートサイトをWordPressからリプレースするなどの方法もありますが、移行コストなどを考慮し、今回は、Wordpressを残したままフロントエンドをNext.jsでSSGしていくことで解決をはかりました。 WordpressからGraphQLで記事情報を取り出す、いわゆるヘッドレスCMSとこれをもとにするJAMstackアーキテクチャにしていく、名付けて「坂ノ途中JAMプロジェクト」です*4。
JAMstackについてはさまざまな記事が執筆されていますが、この記事がたいへん参考になりました。
各状態に応じた表示出し分けについては、クライアントサイドにてswrを用いる方針とし、cssについては特段手を入れず*5、グローバルcssを全ページで読み込む方式として、テンプレートや表示用データ取得のロジックをNext.jsに移植していきました。
下記がシステム全体のざっくり構成図です（※ いろいろ省略されています）。
ページ更新処理は、mainブランチにマージされるとPipelineが実行され*6 → Next.js によるSSG →Amazon S3 へのアップロードという流れです。 この結果、最もTTFBが長かったオンラインショップトップページでは、1000ms短縮に成功しました*7。
振り返りと残課題
今回のリプレースで、各種ページパフォーマンスが大きく改善されただけでなく、データ取得ロジックのリファクタリングとReactコンポーネントの導入によって、表示ロジックの変更も容易になりました。 TypeScriptの導入やCypressを用いたE2Eテストも導入し、安全にフロントエンドの信頼性を高める取り組みもできています。 そのほか、記事更新時のキャッシュパージはSlackのbotからAWS lambdaで実行しています。
残課題としては、キャッシュパージの自動化、サイトをまたぐCSSの管理、プレビュー環境の用意などあり引き続き対応中です。 このあたりはまだまだ改善の余地はありますが、Next.jsやフロントエンドエコシステムの進化によって表示速度と開発速度の改善を感じています。
いまの時代、新しくCMSを利用したサイトをつくる際はSaaSで利用できるヘッドレスCMSが第一線の候補になるとは思いますが、既存のWordPressサイト（なにより世界のCMSの40%で使われています！）を比較的低コストで改善していく際にはWordpressのヘッドレスCMS化は十分ありだと感じています。
今後も、坂ノ途中ITチームでは、お客さまの購買体験を改善したり、生産現場のことをお伝えできるよう機能改善を行う予定です。React, Typescript, Next.jsでECサイト開発をしたいエンジニアの方はぜひお気軽にご連絡くださいませ！
*1:この構成についてはさまざまな議論の余地があると思っています。いろんな仕掛けと試行錯誤があるのでご興味ある方お知らせください！
*2:Usage Statistics and Market Share of Content Management Systems, February 2022
*3: 米ホワイトハウスがCMSとしてWordPressを採用。Drupalから変更 － Publickey
*4:プロジェクト名の由来はあくまでJAMstack。ちなみに弊社オンラインショップで販売されているジャムには、やまのあいだファームのみかんジャム 120g、べじたぶるぱーくさんの栗ジャムなどがございます
*5:html構造とid, class名を一致させることで、今のところ、運用しています
*6:CMSで記事更新時にはSlackショートカットから実行する運用としています
*7:そのほかのページはTTFBが平均約500ms短縮されました。「100ms遅延すると、売上が1%失われる」という言説もあります。
