From e62f45cfde17a8e55bb26c066cff720b1575fba2 Mon Sep 17 00:00:00 2001
From: Yukai Huang <yukaihuangtw@gmail.com>
Date: Wed, 23 Feb 2022 22:34:14 +0800
Subject: [PATCH] feat: enable ssr and fix CurrentResult render error

---
 components/CurrentResults.vue | 18 ++++++++++--------
 nuxt.config.js                |  2 +-
 pages/index.vue               | 17 +++++++++++------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/components/CurrentResults.vue b/components/CurrentResults.vue
index 9288fd6a..29102279 100644
--- a/components/CurrentResults.vue
+++ b/components/CurrentResults.vue
@@ -43,14 +43,6 @@
 
 <script>
 import { computed, onMounted, ref } from '@vue/composition-api'
-import { init, use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import {
-  GridComponent,
-  TooltipComponent,
-  VisualMapComponent,
-} from 'echarts/components'
-import { BarChart, HeatmapChart } from 'echarts/charts'
 
 import BaseSubtitle from '~/components/BaseSubtitle.vue'
 
@@ -87,6 +79,16 @@ export default {
     onMounted(async function () {
       await fetchStatsTotal()
 
+      const { init, use } = require('echarts/core')
+      const { CanvasRenderer } = require('echarts/renderers')
+
+      const {
+        GridComponent,
+        TooltipComponent,
+        VisualMapComponent,
+      } = require('echarts/components')
+      const { BarChart, HeatmapChart } = require('echarts/charts')
+
       use([
         GridComponent,
         TooltipComponent,
diff --git a/nuxt.config.js b/nuxt.config.js
index 1bbdf682..a6d5e5f5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -44,7 +44,7 @@ const metaTwitter = [
 
 export default {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
-  ssr: false,
+  ssr: true,
 
   generate: {
     routes() {
diff --git a/pages/index.vue b/pages/index.vue
index 41d20edd..aecc4f23 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -28,10 +28,12 @@
 
     <ReportTutorial id="report" />
 
-    <CurrentResults
-      id="current-results"
-      :totalReportRecords="totalReportRecords"
-    />
+    <client-only>
+      <CurrentResults
+        id="current-results"
+        :totalReportRecords="totalReportRecords"
+      />
+    </client-only>
 
     <AskedQuestions id="faq" />
 
@@ -50,7 +52,6 @@ import FactoryDisplay from '~/components/FactoryDisplay.vue'
 import DataDisplay from '~/components/DataDisplay.vue'
 import BannerJoinUs from '~/components/BannerJoinUs.vue'
 import ReportTutorial from '~/components/ReportTutorial.vue'
-import CurrentResults from '~/components/CurrentResults.vue'
 import AskedQuestions from '~/components/AskedQuestions.vue'
 import MediaReport from '~/components/MediaReport.vue'
 import TheFooter from '~/components/TheFooter.vue'
@@ -67,7 +68,11 @@ export default {
     DataDisplay,
     BannerJoinUs,
     ReportTutorial,
-    CurrentResults,
+    CurrentResults: () => {
+      if (!process.server && process.client) {
+        return import('../components/CurrentResults.vue')
+      }
+    },
     AskedQuestions,
     MediaReport,
     TheFooter,