Added hydration

Author: mugetsu

components/Overview/index.vue

@@ -52,7 +52,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Latest from '~/components/Latest'
+const Latest = () => import('~/components/Latest')
 
 export default {
   name: 'Overview',

layouts/default.vue

@@ -1,23 +1,15 @@
 <template>
   <div class="wrapper">
-    <!-- <Header /> -->
     <div class="main-content">
       <nuxt />
     </div>
-    <!-- <Footer /> -->
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-// import Header from '~/components/Header'
-// import Footer from '~/components/Footer'
 
 export default {
-  // components: {
-  //   Header,
-  //   Footer
-  // },
   head () {
     return {
       title: 'COVID-19 Tracker',

package-lock.json

@@ -29,7 +29,8 @@
     "mapbox-gl": "^1.8.1",
     "mapbox-gl-vue": "^2.0.4",
     "nuxt": "^2.11.0",
-    "vue-apexcharts": "^1.5.2"
+    "vue-apexcharts": "^1.5.2",
+    "vue-lazy-hydration": "^1.0.0-beta.12"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

package.json

@@ -1,27 +1,37 @@
 <template>
   <div class="page" :class="{ 'is-open': isOpen }">
-    <Latest :data="latest" size="large" />
-    <Search @search="onToggle" />
-    <div class="overview-wrapper">
-      <div class="overview-background">
-        <Overview v-if="isOpen" @close="onToggle" />
+    <LazyHydrate ssr-only :trigger-hydration="!!latest">
+      <Latest :data="latest" size="large" />
+    </LazyHydrate>
+    <LazyHydrate when-idle>
+      <Search @search="onToggle" />
+    </LazyHydrate>
+    <LazyHydrate ssr-only :trigger-hydration="isOpen">
+      <div class="overview-wrapper">
+        <div class="overview-background">
+          <Overview @close="onToggle" />
+        </div>
       </div>
-    </div>
-    <div class="map-wrapper">
-      <Map :data="data" />
-    </div>
+    </LazyHydrate>
+    <LazyHydrate when-idle>
+      <div class="map-wrapper">
+        <Map :data="data" />
+      </div>
+    </LazyHydrate>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import Latest from '~/components/Latest'
-import Search from '~/components/Search'
-import Overview from '~/components/Overview'
-import Map from '~/components/Map'
+import LazyHydrate from 'vue-lazy-hydration'
+const Latest = () => import('~/components/Latest')
+const Search = () => import('~/components/Search')
+const Overview = () => import('~/components/Overview')
+const Map = () => import('~/components/Map')
 
 export default {
   components: {
+    LazyHydrate,
     Latest,
     Search,
     Overview,