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

## はじめに

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

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

## 確認

[インストール - NuxtJS](https://ja.nuxtjs.org/guide/installation/)に記載の通りSPAのアプリケーションを作成します。

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

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

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

このようなリクエストが飛びます。
<img width="1318" alt="スクリーンショット 2020-01-24 15.49.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/bc1ef46c-eab6-b615-6ecd-8f698aea6a3f.png">

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

```diff
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`へのリクエストが増えます。
<img width="1319" alt="s.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/65325909-cb5e-0104-f671-9a4f1f976274.jpeg">

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

```diff
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`へのリクエストは発生せず、
<img width="1320" alt="スクリーンショット 2020-01-24 16.03.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/30e525f3-82a1-1c24-67cd-a1c7209063b6.png">

`/syncA`に遷移したタイミングでリクエストが発生します。
<img width="1317" alt="ss.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/c56ffd71-1f88-66de-f226-c02dccbf1eaf.jpeg">


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

```diff
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>
```

以下の通り、最初はリクエストが飛ばす、
<img width="1315" alt="スクリーンショット 2020-01-24 16.18.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/b7021a49-88ae-e348-9ca5-6e53de50e7fb.png">

リンクが表示されたタイミングでリクエストされます。
<img width="1319" alt="sss.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/a8e9a87d-fffe-c028-bef9-c8537e10ad7c.jpeg">

最後にprefetchしないリンクを追加します。
prefetchの詳細は以下を参照ください。
[API: <nuxt-link> コンポーネント - NuxtJS](https://ja.nuxtjs.org/api/components-nuxt-link/)

```diff
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`へリクエストせず、
<img width="1319" alt="スクリーンショット 2020-01-24 16.37.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/dead8a73-0680-4179-08d2-f910a9e8b847.png">

`/syncB`に遷移したタイミングにリクエストされます。
<img width="1317" alt="sssssss.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/722e17cd-65ca-ac8f-3acf-619413d7361b.jpeg">