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 로 천이한 타이밍에 요구됩니다.