feat: move more content to rendering on the server-side (#138)

aeternity · Apr 24, 2023 · 878fb3b · 878fb3b
1 parent f93f844
commit 878fb3b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 48 deletions.
diff --git a/src/components/AppHero.vue b/src/components/AppHero.vue
@@ -14,10 +14,8 @@
           <the-search-bar class="hero__search-bar"/>
         </div>
       </div>
-      <client-only>
-        <market-stats class="hero__market-stats"/>
-        <stats-panel/>
-      </client-only>
+      <market-stats class="hero__market-stats"/>
+      <stats-panel/>
     </div>
   </div>
 </template>

diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
@@ -28,9 +28,7 @@
             Price
           </th>
           <td class="token-details-panel__data">
-            <client-only>
-              {{ fiatPrice }} ({{ formatAePrice(tokenDetails.price) }})
-            </client-only>
+            {{ fiatPrice }} ({{ formatAePrice(tokenDetails.price) }})
           </td>
         </tr>
         <tr
@@ -40,9 +38,7 @@
             Market cap
           </th>
           <td class="token-details-panel__data">
-            <client-only>
-              {{ marketCap }}
-            </client-only>
+            {{ marketCap }}
           </td>
         </tr>
         <tr class="token-details-panel__row">

diff --git a/src/components/TokensPanel.vue b/src/components/TokensPanel.vue
@@ -44,7 +44,7 @@ async function loadNextTokens() {
 const limit = computed(() => process.client && isDesktop() ? 10 : 3)
 
 if (process.client) {
-  await fetchTokens(`/v2/aex9?by=name&direction=forward&limit=${limit.value}`)
+  fetchTokens(`/v2/aex9?by=name&direction=forward&limit=${limit.value}`)
 }
 
 </script>

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -39,9 +39,7 @@
             The æternity blockchain supports protocol-level .chain names via the
             æternity naming system (AENS).
           </div>
-          <client-only>
-            <names-panel/>
-          </client-only>
+          <names-panel/>
         </div>
         <div class="dashboard__column">
           <h2 class="dashboard__heading">
@@ -51,9 +49,7 @@
             .chain names can be obtained either immediately or via an auction
             process, if shorter than 13 characters.
           </div>
-          <client-only>
-            <auctions-panel>Auctions ending soon</auctions-panel>
-          </client-only>
+          <auctions-panel>Auctions ending soon</auctions-panel>
         </div>
       </div>
 
@@ -72,9 +68,7 @@
               Learn more
             </app-link>
           </div>
-          <client-only>
-            <state-channels-panel class="dashboard__state-channels-panel"/>
-          </client-only>
+          <state-channels-panel class="dashboard__state-channels-panel"/>
         </div>
       </div>
     </div>
@@ -89,25 +83,32 @@ import StateChannelsPanel from '@/components/StateChannelsPanel'
 import AppHero from '@/components/AppHero'
 import AppLink from '@/components/AppLink'
 
-if (process.client) {
-  const {
-    fetchSelectedMicroblocksInfo,
-    fetchDeltaStats,
-  } = useRecentBlocksStore()
-  const { fetchBlockchainStats } = useBlockchainStatsStore()
-  const { fetchStateChannels } = useStateChannelsStore()
-  const { fetchInAuctionNames, fetchRecentlyActivatedNames } = useNamesStore()
-
-  // fetch client-side only due to very dynamic nature of the data and limit difference depending on desktop/mobile view
-  await useAsyncData(() => Promise.all([
-    fetchStateChannels(),
-    fetchInAuctionNames(),
-    fetchRecentlyActivatedNames(),
-    fetchSelectedMicroblocksInfo(),
-    fetchBlockchainStats(),
-    fetchDeltaStats(),
-  ]))
-}
+const {
+  fetchSelectedMicroblocksInfo,
+  fetchDeltaStats,
+} = useRecentBlocksStore()
+const {
+  fetchTotalStats,
+  fetchMaxTps,
+  fetchTotalTransactionsCount,
+} = useBlockchainStatsStore()
+const { fetchStateChannels } = useStateChannelsStore()
+const { fetchInAuctionNames, fetchRecentlyActivatedNames } = useNamesStore()
+
+await useAsyncData(() => Promise.all([
+  fetchStateChannels(),
+  fetchInAuctionNames(),
+  fetchRecentlyActivatedNames(),
+  fetchTotalStats(),
+  fetchMaxTps(),
+]))
+
+// fetch client-side only due to very dynamic nature of the data and limit difference depending on desktop/mobile view
+await useAsyncData(() => Promise.all([
+  fetchSelectedMicroblocksInfo(),
+  fetchTotalTransactionsCount(),
+  fetchDeltaStats(),
+]), { server: false })
 </script>
 
 <style scoped>

diff --git a/src/stores/blockchainStats.js b/src/stores/blockchainStats.js
@@ -17,13 +17,6 @@ export const useBlockchainStatsStore = defineStore('blockchainStats', {
     burnedCount: null,
   }),
   actions: {
-    fetchBlockchainStats() {
-      return Promise.all([
-        this.fetchTotalStats(),
-        this.fetchMaxTps(),
-        this.fetchTotalTransactionsCount(),
-      ])
-    },
     async fetchTotalStats() {
       const { data } = await axios.get(`${useRuntimeConfig().public.MIDDLEWARE_URL}/v2/totalstats?limit=1`)
       const lastBlock = data.data[0]

diff --git a/src/stores/contractDetails.js b/src/stores/contractDetails.js
@@ -15,14 +15,16 @@ export const useContractDetailsStore = defineStore('contractDetails', {
     rawContractCallTransactions: null,
   }),
   actions: {
-    fetchContractDetails(contractId) {
+    async fetchContractDetails(contractId) {
       this.contractId = contractId
-      return Promise.allSettled([
+      await Promise.allSettled([
         this.fetchContractInformation(),
         this.fetchContractCallsCount(),
         this.fetchContractCreationTx(),
         this.fetchContractType(),
       ])
+
+      return true
     },
     async fetchContractInformation() {
       this.rawContractInformation = null