SPAの限界を克服する

Vue.jsのようなシングルページアプリケーション（SPA）は、優れたスピードとユーザー体験を提供します。スムーズな遷移と高速な状態管理により、開発が容易になります。

もしビジネスがオーガニック検索トラフィックに依存している場合、問題に直面することになります。検索エンジンのボットがSPAにアクセスすると、空のHTMLシェルしか見えないことがよくあります。GoogleはJavaScriptの処理が遅く、他の検索エンジンではコンテンツのインデックス作成自体が困難な場合があります。

私たちはVue 3を使用してGlobal Full-Stack Developer (GFD)を構築しました。コードベース全体をNuxtのようなサーバーサイドレンダリング（SSR）フレームワークに移行することなく、SEOを実現する必要がありました。

私たちはビルド時のプリレンダリングを選択しました。

プリレンダリングは、ビルドプロセス中に特定のルートを静的なHTMLファイルに変換します。ボットがサイトにアクセスすると、空のdivではなく、完全なHTMLドキュメントが受け取られます。

Viteのセットアップには vite-plugin-prerender を使用しました。

実装するには、以下の手順に従ってください：

  1. プラグインを開発用依存関係としてインストールします： npm install vite-plugin-prerender -D

  2. vite.config.js を設定して、ルートをリストアップします。

  3. ビルドコマンドを実行します。

この方法により、フルSSRの複雑さを回避しながら、SEOのメリットを得ることができます。

出典: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd