From f04d7ac067a86de9d01ce3d578d7fc51b10a0a41 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Jan 2023 14:50:47 +0000
Subject: [PATCH] fix: defer loading text and server links until hydration
 (#926)

---
 components/common/CommonRouteTabs.vue |  2 +-
 components/nav/NavSide.vue            |  6 +++---
 components/nav/NavSideItem.vue        |  2 +-
 components/search/SearchWidget.vue    |  2 +-
 nuxt.config.ts                        |  3 ++-
 pages/[[server]]/explore.vue          | 16 ++++++++--------
 pages/[[server]]/explore/index.vue    |  2 +-
 pages/[[server]]/explore/links.vue    |  2 +-
 pages/[[server]]/explore/tags.vue     |  2 +-
 pages/[[server]]/explore/users.vue    |  2 +-
 pages/notifications.vue               |  4 ++--
 pages/notifications/index.vue         |  2 +-
 pages/notifications/mention.vue       |  2 +-
 public/_redirects                     |  1 +
 14 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index 75ca06e6..fdd2174a 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -43,7 +43,7 @@ useCommands(() => command
         exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
         @click="!preventScrollTop && $scrollToTop()"
       >
-        <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
+        <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display || '&nbsp;' }}</span>
       </NuxtLink>
       <div v-else flex flex-auto sm:px6 px2 xl:pb4 xl:pt5>
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 3e80416d..7b0d48fa 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -29,9 +29,9 @@ const { notifications } = useNotifications()
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <div shrink hidden sm:block mt-4 />
-    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" />
-    <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" />
-    <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="isMastoInitialised ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
+    <NavSideItem :text="$t('nav.local')" :to="isMastoInitialised ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
+    <NavSideItem :text="$t('nav.federated')" :to="isMastoInitialised ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
 
     <div shrink hidden sm:block mt-4 />
     <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index aa9c9243..81833884 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -66,7 +66,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
           <div :class="icon" text-xl />
         </slot>
         <slot>
-          <span block sm:hidden xl:block>{{ text }}</span>
+          <span block sm:hidden xl:block>{{ isHydrated ? text : '&nbsp;' }}</span>
         </slot>
       </div>
     </CommonTooltip>
diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index e9db61b2..12d27f19 100644
--- a/components/search/SearchWidget.vue
+++ b/components/search/SearchWidget.vue
@@ -66,7 +66,7 @@ const activate = () => {
         bg-transparent
         outline="focus:none"
         pe-4
-        :placeholder="t('nav.search')"
+        :placeholder="isHydrated ? t('nav.search') : ''"
         pb="1px"
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2d768b9a..9d1ed396 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -112,8 +112,9 @@ export default defineNuxtConfig({
   },
   nitro: {
     prerender: {
-      crawlLinks: false,
+      crawlLinks: true,
       routes: ['/'],
+      ignore: ['/settings'],
     },
   },
   app: {
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index c50933fb..7495022b 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -3,21 +3,21 @@ const { t } = useI18n()
 
 const tabs = $computed(() => [
   {
-    to: `/${currentServer.value}/explore`,
-    display: t('tab.posts'),
+    to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
+    display: isHydrated.value ? t('tab.posts') : '',
   },
   {
-    to: `/${currentServer.value}/explore/tags`,
-    display: t('tab.hashtags'),
+    to: isHydrated.value ? `/${currentServer.value}/explore/tags` : '/explore/tags',
+    display: isHydrated.value ? t('tab.hashtags') : '',
   },
   {
-    to: `/${currentServer.value}/explore/links`,
-    display: t('tab.news'),
+    to: isHydrated.value ? `/${currentServer.value}/explore/links` : '/explore/links',
+    display: isHydrated.value ? t('tab.news') : '',
   },
   // This section can only be accessed after logging in
   {
-    to: `/${currentServer.value}/explore/users`,
-    display: t('tab.for_you'),
+    to: isHydrated.value ? `/${currentServer.value}/explore/users` : '/explore/users',
+    display: isHydrated.value ? t('tab.for_you') : '',
     disabled: !isMastoInitialised.value || !currentUser.value,
   },
 ] as const)
diff --git a/pages/[[server]]/explore/index.vue b/pages/[[server]]/explore/index.vue
index aee8806d..28088b7b 100644
--- a/pages/[[server]]/explore/index.vue
+++ b/pages/[[server]]/explore/index.vue
@@ -8,7 +8,7 @@ const paginator = useMasto().v1.trends.listStatuses()
 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)
 
 useHeadFixed({
-  title: () => `${t('tab.posts')} | ${t('nav.explore')}`,
+  title: () => isHydrated.value ? `${t('tab.posts')} | ${t('nav.explore')}` : '',
 })
 </script>
 
diff --git a/pages/[[server]]/explore/links.vue b/pages/[[server]]/explore/links.vue
index 55f8be76..af8deb96 100644
--- a/pages/[[server]]/explore/links.vue
+++ b/pages/[[server]]/explore/links.vue
@@ -8,7 +8,7 @@ const paginator = useMasto().v1.trends.listLinks()
 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)
 
 useHeadFixed({
-  title: () => `${t('tab.news')} | ${t('nav.explore')}`,
+  title: () => isHydrated.value ? `${t('tab.news')} | ${t('nav.explore')}` : '',
 })
 </script>
 
diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue
index f69447f5..6edbb0aa 100644
--- a/pages/[[server]]/explore/tags.vue
+++ b/pages/[[server]]/explore/tags.vue
@@ -11,7 +11,7 @@ const paginator = masto.v1.trends.listTags({
 const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
 
 useHeadFixed({
-  title: () => `${t('tab.hashtags')} | ${t('nav.explore')}`,
+  title: () => isHydrated.value ? `${t('tab.hashtags')} | ${t('nav.explore')}` : '',
 })
 </script>
 
diff --git a/pages/[[server]]/explore/users.vue b/pages/[[server]]/explore/users.vue
index 218d5964..7fec975d 100644
--- a/pages/[[server]]/explore/users.vue
+++ b/pages/[[server]]/explore/users.vue
@@ -5,7 +5,7 @@ const { t } = useI18n()
 const paginator = useMasto().v2.suggestions.list({ limit: 20 })
 
 useHeadFixed({
-  title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
+  title: () => isHydrated.value ? `${t('tab.for_you')} | ${t('nav.explore')}` : '',
 })
 </script>
 
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 4f581165..96983161 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -10,12 +10,12 @@ const tabs = $computed(() => [
   {
     name: 'all',
     to: '/notifications',
-    display: t('tab.notifications_all'),
+    display: isHydrated.value ? t('tab.notifications_all') : '',
   },
   {
     name: 'mention',
     to: '/notifications/mention',
-    display: t('tab.notifications_mention'),
+    display: isHydrated.value ? t('tab.notifications_mention') : '',
   },
 ] as const)
 </script>
diff --git a/pages/notifications/index.vue b/pages/notifications/index.vue
index 392f9bad..6baa336c 100644
--- a/pages/notifications/index.vue
+++ b/pages/notifications/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 useHeadFixed({
-  title: () => `${t('tab.notifications_all')} | ${t('nav.notifications')}`,
+  title: () => isHydrated.value ? `${t('tab.notifications_all')} | ${t('nav.notifications')}` : '',
 })
 </script>
 
diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue
index 110af1b7..3c3ea858 100644
--- a/pages/notifications/mention.vue
+++ b/pages/notifications/mention.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 useHeadFixed({
-  title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`,
+  title: () => isHydrated.value ? `${t('tab.notifications_mention')} | ${t('nav.notifications')}` : '',
 })
 </script>
 
diff --git a/public/_redirects b/public/_redirects
index 10f66489..799fd9b2 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -1 +1,2 @@
 /docs/* https://docs.elk.zone/:splat 200
+/settings/* /index.html 200