自社サービスサイトをNuxtからAstroに置き換えた話

はじめに

Nuxtで作られていた弊社サービスサイトを一部Astroに置き換えたので、よかったことや困ったことを書きたいと思います。

Astroとは

公式サイトには以下の様に記されています。

Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。

サービスサイトの様な静的サイトを作成するにあたって、とてもマッチしているフレームワークといえます。
さらに、AstroはReactやVueなどのUIライブラリで作られたコンポーネントを呼び出すことができるため、Nuxtで作られていた既存資産を流用しながら置き換えるにはとても良いフレームワークだと考えました。

Astroへの漸進的な移行

いきなり全てAstroへの移行を行うと、とてつもない工数がかかるため、部分的にAstroへの移行を開始しました。

弊社サービスサイトは以下の様な構成になっています。

表示速度の改善はCVRの向上に繋がるというデータの元、ユーザーの表示回数の多い各種プロダクトページからAstro化していくことにしました。

Astro化する際に困ったこと

client:loadを使用すること

Nuxtでは意識していなかった、クライアント側で何を処理させるかという考え方の変化に躓きました。
弊社サービスサイトはレスポンシブデザインとなっていて、スマーフォン、タブレット、PCでの画面切り替えが必要です。
しかし、Astroはデフォルトではjsを排除してビルドされているため、画面幅を検知してDOMを切り替え等のことは初期状態ではできません。
そのため、JavaScriptでの処理が必要な場合は明示的に client:loadを付ける必要がありました。

index.astro

--- 
import HogeComponent from '../components/HogeComponent.vue'
---

<HogeComponent
  client:load
/>

HogeComponent.vue

<template>
  <div>
    <p v-if="isPc">PC表示</p>
    <p v-else-if="isSp">SP表示</p>
  </div>
</template>
<script>
export default {
// リサイズ等のイベント登録等は省略してます
computed: {
    isPc() {
      return 1024 <= window.innerWidth
    },
    isSp() {
      return window.innerWidth < 768
    },
  },
}
</script>

パフォーマンス改善

jsが排除されることでページスピードは飛躍的に向上しましたが、やはりcleint:loadをつけているとその分だけTotal Blocking Timeがあがってしまいました。
Astroの良さをさらに引き出すため、jsは極力使わずCSSのメディアクエリーで再現できるものはそちらで対応するようにしました。

まだ情報が少ない

Astroはモダンな技術ということもあり、使用事例等がまだまだ少なかったので、試行錯誤でかなり工数をつかってしまいました。
公式ドキュメントはかなり充実しているので、困ったら眺めるようにしています。

Astro化してよかったこと

高速化

Astroではクライアント側でのjs実行を明示的に指定しない限りは、js等を取り除いて生成されます。
そのため、ページのロード速度等が飛躍的に向上しました。

既存資材の流用が可能

元々弊社サービスサイトはNuxt2で作られていました。
各コンポーネントはVue.jsで作成されていましたが、Astroでは各種フレームワークのコンポーネントを使用することができるため、移行のコストは最小限に抑えることができました。
また、移行前はNuxt2で作られており、Vueのバージョンも古かったためこのタイミングでVue3にあげることにより、マイグレーションも同時に行うことができました。

CLS改善

Astroではローカル内の画像をimgタグ等に使用する際はimportして読み込みます。

<template>
  <img
    :src="hoge.src"
    :width="hoge.width"
    :height="hoge.height"
  />
</template>

<script>
import hoge from '../assets/images/hoge.png'

export default {
  data() {
    return {
      hoge
    }
  }
}
</script>

上記のように読み込むことができ、画像の横幅や縦幅が画像から読み込むことができます。
そのため、画像ごとにwidth,heightをマジックナンバーで指定する必要がなくなりました。

おわりに

現在ではトップページと各種プロダクトページのAstro化が終わっていて、体感でもわかるレベルで高速化されています。
ぜひ弊社サービスサイトを一度訪れて、体験していただければと思います。