SPAではどのようにHTTPリクエストが飛ぶのかNuxtJSで確認

はじめに

SPAを始めるにあたり、どのようにHTTPリクエストが飛んでいるのか把握したかったので確認してみました。

確認したnuxtのバージョンは 2.11.0 です。

確認

インストール - NuxtJSに記載の通りSPAのアプリケーションを作成します。

$ npx create-nuxt-app sandbox-nuxt-spa

pagesにindex.vueのみある状態です。

npm run dev でアプリケーションを起動し、http://localhost:3000 にアクセスします。

このようなリクエストが飛びます。

次にsyncA.vueを追加し、index.vueにそれへのリンクを追加します。

diff --git a/pages/index.vue b/pages/index.vue
index 286cb96..c422cc2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,6 +9,7 @@
         My priceless Nuxt.js project
       </h2>
       <div class="links">
+        <nuxt-link to="/syncA">syncA link</nuxt-link>
         <a
           href="https://nuxtjs.org/"
           target="_blank"
diff --git a/pages/syncA.vue b/pages/syncA.vue
new file mode 100644
index 0000000..e4c809f
--- /dev/null
+++ b/pages/syncA.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>This is syncA.</div>
+</template>

このようなリクエストが飛びます。

syncA.jsへのリクエストが増えます。

次にsyncB.vueを追加し、syncA.vueにそれへのリンクを追加します。

diff --git a/pages/syncA.vue b/pages/syncA.vue
index e4c809f..6ec6633 100644
--- a/pages/syncA.vue
+++ b/pages/syncA.vue
@@ -1,3 +1,6 @@
 <template>
-    <div>This is syncA.</div>
+    <div>
+        <div>This is syncA.</div>
+        <nuxt-link to="/syncB">syncB link</nuxt-link>
+    </div>
 </template>
diff --git a/pages/syncB.vue b/pages/syncB.vue
new file mode 100644
index 0000000..05a610d
--- /dev/null
+++ b/pages/syncB.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>This is syncB.</div>
+</template>

以下の通り、/indexではsyncB.jsへのリクエストは発生せず、

/syncAに遷移したタイミングでリクエストが発生します。

次にasyncX.vueを追加し、index.vueでそれへのリンクを非同期で表示します。

diff --git a/pages/asyncX.vue b/pages/asyncX.vue
new file mode 100644
index 0000000..00db3d7
--- /dev/null
+++ b/pages/asyncX.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>This is asyncX.</div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index c422cc2..167a982 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,6 +10,7 @@
       </h2>
       <div class="links">
         <nuxt-link to="/syncA">syncA link</nuxt-link>
+        <nuxt-link to="/asyncX" v-if="isShown">async link</nuxt-link>
         <a
           href="https://nuxtjs.org/"
           target="_blank"
@@ -35,6 +36,16 @@ import Logo from '~/components/Logo.vue'
 export default {
   components: {
     Logo
+  },
+  data () {
+     return {
+      isShown: false
+     }
+  },
+  mounted () {
+    setTimeout(function() {
+      this.isShown = true;
+    }.bind(this), 10000);
   }
 }
 </script>

以下の通り、最初はリクエストが飛ばす、

リンクが表示されたタイミングでリクエストされます。

最後にprefetchしないリンクを追加します。
prefetchの詳細は以下を参照ください。
API: コンポーネント - NuxtJS

diff --git a/pages/index.vue b/pages/index.vue
index 167a982..9e3d090 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,6 +11,7 @@
       <div class="links">
         <nuxt-link to="/syncA">syncA link</nuxt-link>
         <nuxt-link to="/asyncX" v-if="isShown">async link</nuxt-link>
+        <nuxt-link to="/syncB" no-prefetch>syncB link</nuxt-link>
         <a
           href="https://nuxtjs.org/"
           target="_blank"

/indexではsyncB.jsへリクエストせず、

/syncBに遷移したタイミングにリクエストされます。