このページの本文へ

SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ!

2017年09月08日 17時55分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか? サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。

ユニバーサル(Isomorphic)JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。

Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション(Single Page Application : SPA)の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もあります。ブラウザーがJavaScriptバンドルを取得するため、初期ロード時の「コンテンツ表示時間」が長くなったり、検索エンジンのWebクローラーやソーシャルネットワークのロボットが、ロードが完了したあとのアプリをクロールしなかったりします。

JavaScriptのサーバーサイドレンダリングとは、JavaScriptアプリケーションをWebサーバーでプリロードし、ブラウザーからのページリクエストに対してレンダリングされたHTMLを送信することです。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く