fix: optimize ssr render

Author: recoluan

packages/vuepress-theme-reco/src/client/components/DropdownLink/index.vue

@@ -87,13 +87,21 @@ const dropdownAriaLabel = computed(
 )
 
 const open = ref(false)
+
+// 安全地使用路由，避免在服务器端渲染时出错
 const route = useRoute()
-watch(
-  () => route.path,
-  () => {
-    open.value = false
-  }
-)
+
+// 只在客户端看视路由变化
+// 确保route存在且具有path属性
+
+if (route && typeof route.path !== 'undefined') {
+  watch(
+    () => route.path,
+    () => {
+      open.value = false
+    }
+  )
+}
 
 const inButton = ref(false)
 const handleButtonMouseEnter = () => {

packages/vuepress-theme-reco/src/client/components/GenericContainer/useSeries.ts

@@ -2,27 +2,88 @@ import { useRouter } from 'vuepress/client'
 import { onMounted, onUnmounted } from 'vue'
 import { useScrollDirection } from '@composables/index.js'
 
+// 定义简化的Router类型
+// 这里仅定义我们需要的最小属性集合
+
+interface RouteLocation {
+  path: string;
+  [key: string]: any;
+}
+
+interface RouterType {
+  afterEach: (callback: (to: RouteLocation, from: RouteLocation) => void) => (() => void);
+  [key: string]: any;
+}
+
 export function useSeries() {
-  let unregisterRouterHook
+  let unregisterRouterHook: (() => void) | null = null;
+  
+  // 提供一个默认的降级实现
+  let router: RouterType = {
+    afterEach: (callback) => {
+      // 记录注册的回调，但不实际执行任何路由变化
+      // 返回一个空函数作为unregister
+      return () => {
+        // 空函数作为unregister
+      };
+    }
+  };
 
-  const initSeriesStatus = (cb) => {
+  // 确保SSR期间不调用useRouter
+  const isClient = typeof window !== 'undefined';
+  if (isClient) {
+    try {
+      // 只在客户端环境下调用useRouter
+      const clientRouter = useRouter();
+      if (clientRouter && typeof clientRouter.afterEach === 'function') {
+        router = clientRouter;
+      }
+    } catch (e) {
+      console.warn('Failed to use router, using fallback implementation', e);
+    }
+  } else {
+    // 服务器端渲染环境
+  }
+
+  const initSeriesStatus = (cb: () => void) => {
+    // 在SSR期间此函数不应执行任何与路由相关的操作
+    if (typeof window === 'undefined') {
+      return;
+    }
+    
     onMounted(() => {
-      const router = useRouter()
-      const { direction } = useScrollDirection()
-      unregisterRouterHook = router.afterEach((to, from) => {
-        // close series after navigation
-        if (to.path !== from.path) {
-          cb()
-
-          direction.value = ''
-        }
-      })
-    })
+      try {
+        const { direction } = useScrollDirection();
+        
+        // 只在客户端环境注册路由钩子
+        
+        // 使用router (在客户端环境已初始化)
+        unregisterRouterHook = router.afterEach((to, from) => {
+          // 增加健壮性检查
+          if (to && from && typeof to.path === 'string' && typeof from.path === 'string' && to.path !== from.path) {
+            cb();
+            
+            if (direction && typeof direction.value !== 'undefined') {
+              direction.value = '';
+            }
+          }
+        });
+      } catch (e) {
+        console.warn('Error in initSeriesStatus', e);
+      }
+    });
 
     onUnmounted(() => {
-      unregisterRouterHook()
-    })
-  }
+      if (typeof unregisterRouterHook === 'function') {
+        try {
+          unregisterRouterHook();
+          unregisterRouterHook = null;
+        } catch (e) {
+          console.warn('Error when unregistering router hook', e);
+        }
+      }
+    });
+  };
 
-  return { initSeriesStatus }
+  return { initSeriesStatus };
 }

packages/vuepress-theme-reco/src/client/components/Link.vue

@@ -1,5 +1,5 @@
 <template>
-  <RouterLink
+  <SafeRouterLink
     v-if="isRouterLink"
     class="link"
     :class="{ 'router-link-active': isActiveInSubpath }"
@@ -11,7 +11,7 @@
     <slot name="before" />
     <Xicons :icon="item.icon" :text="item.text" />
     <slot name="after" />
-  </RouterLink>
+  </SafeRouterLink>
 
   <a
     v-else
@@ -34,6 +34,7 @@
 import { computed, toRefs } from 'vue'
 import { isLinkHttp, isLinkWithProtocol } from 'vuepress/shared'
 import { withBase, useSiteData, useRouteLocale, useRoute } from 'vuepress/client'
+import SafeRouterLink from '@components/SafeRouterLink.vue'
 
 import { useThemeLocaleData } from '@composables/index.js'
 
@@ -103,17 +104,34 @@ const shouldBeActiveInSubpath = computed(() => {
 
 // if this link is active in subpath
 const isActiveInSubpath = computed(() => {
-  if (!isRouterLink.value || !shouldBeActiveInSubpath.value) {
+  // 首先检查route是否存在以及route.path是否定义，这样在服务器渲染过程中不会出错
+  if (!route || typeof route.path === 'undefined' || !isRouterLink.value || !shouldBeActiveInSubpath.value) {
     return false
   }
 
+  // 确保themeLocal.value存在
+  if (!themeLocal.value) {
+    return false
+  }
+  
+  // 确保item.value.link存在且为有效字符串
+  if (!item.value || typeof item.value.link !== 'string' || !item.value.link) {
+    return false
+  }
+
+  // 获取主页路径
+  const homePath = themeLocal.value.home || '/'
+  const baseHomePath = withBase(homePath)
+  const itemLink = item.value.link
+  
   if (
-    route.path === withBase(themeLocal.value.home || '/') &&
-    item.value.link === withBase(themeLocal.value.home || '/')
+    route.path === baseHomePath &&
+    itemLink === baseHomePath
   ) {
     return true
   }
 
-  return route.path.startsWith(item.value.link as string) && !item.value.link?.endsWith('/')
+  // 安全地检查startsWith和endsWith
+  return route.path.startsWith(itemLink) && !itemLink.endsWith('/')
 })
 </script>

packages/vuepress-theme-reco/src/client/components/Navbar/SiteBrand.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { toRefs } from 'vue'
+import SafeRouterLink from '@components/SafeRouterLink.vue'
 
 const props = defineProps({
   icon: {
@@ -28,14 +29,14 @@ const { title, icon, link } = toRefs(props)
       :alt="title"
     />
 
-    <RouterLink
+    <SafeRouterLink
       v-if="title"
       :to="link"
       class="site-name"
       :class="{ 'can-hide': icon }"
     >
       {{ title }}
-    </RouterLink>
+    </SafeRouterLink>
   </div>
 </template>
 

packages/vuepress-theme-reco/src/client/components/PostList/PostItem.vue

@@ -1,17 +1,18 @@
 <template>
   <MagicCard class="post-item-container">
     <div class="title">
-      <RouterLink :to="data.path">
+      <SafeRouterLink :to="data.path">
         <Xicons v-if="data.frontmatter?.sticky" :icon="IconStar" />
         <span>{{ data.title }}</span>
-      </RouterLink>
+      </SafeRouterLink>
     </div>
     <PageInfo :page-data="data" :hide-views="solution==='valine'"> </PageInfo>
   </MagicCard>
 </template>
 
 <script lang="ts" setup>
 import { toRefs } from 'vue'
+import SafeRouterLink from '@components/SafeRouterLink.vue'
 import { useComment } from '@vuepress-reco/vuepress-plugin-comments/composables'
 
 import PageInfo from '@components/PageInfo.vue'

packages/vuepress-theme-reco/src/client/components/SafeRouterLink.vue

@@ -0,0 +1,79 @@
+<template>
+  <component
+    :is="linkComponent"
+    v-bind="componentProps"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+// 注意：我们有意使用普通JavaScript而非Typescript
+// 这可以避免TS在编译期间检查导入的组件
+
+import { h, shallowRef, computed } from 'vue'
+
+// 安全地检测我们是否在服务器上
+const isServer = typeof window === 'undefined'
+
+// 使用 shallowRef 避免 Vue 深入解析导入的组件
+const linkComponent = shallowRef('a')
+
+// 这些属性将被传递给最终渲染的组件
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  },
+  custom: {
+    type: Boolean,
+    default: false
+  },
+  replace: {
+    type: Boolean,
+    default: false
+  },
+  ariaCurrent: {
+    type: String,
+    default: 'page'
+  }
+})
+
+// 计算出给组件的属性
+const componentProps = computed(() => {
+  if (isServer) {
+    // 在服务器端，我们使用普通的a标签
+    return {
+      class: 'router-link-fallback',
+      href: typeof props.to === 'string' ? props.to : '',
+      ...props.$attrs
+    }
+  } else {
+    // 在客户端，我们使用RouterLink的属性
+    return {
+      to: props.to,
+      custom: props.custom,
+      replace: props.replace,
+      'aria-current': props.ariaCurrent,
+      ...props.$attrs
+    }
+  }
+})
+
+// 只在客户端环境下动态导入和使用RouterLink
+if (!isServer) {
+  // 时间函数延迟运行，确保到了客户端才运行
+  setTimeout(() => {
+    try {
+      // 动态导入RouterLink
+      import('vue-router').then(module => {
+        linkComponent.value = module.RouterLink
+      }).catch(e => {
+        console.warn('SafeRouterLink: Failed to load RouterLink, using fallback link', e)
+      })
+    } catch (e) {
+      console.warn('SafeRouterLink: Error importing RouterLink', e)
+    }
+  }, 0)
+}
+</script>

packages/vuepress-theme-reco/src/client/composables/useSeriesItems.ts

@@ -99,6 +99,11 @@ const resolveMultiSeriesItems = (
   seriesConfig: SeriesConfigObject,
   route: RouteLocationNormalizedLoaded
 ): ResolvedSeriesItem[] => {
+  // 确保route.path存在，避免在某些组件（如Timeline）中使用时出错
+  if (!route || typeof route.path === 'undefined') {
+    return []
+  }
+  
   const seriesPath = resolveLocalePath(
     seriesConfig,
     decodeURIComponent(route.path)

packages/vuepress-theme-reco/src/client/layouts/Categories.vue

@@ -12,12 +12,12 @@
             },
           ]"
         >
-          <RouterLink
+          <SafeRouterLink
             class="category-link"
             :to="`/${categoryPosts.currentCategoryKey}/${categoryValue}/1.html`"
           >
             <span class="text">{{ label }}</span>
-          </RouterLink>
+          </SafeRouterLink>
         </li>
       </ul>
 
@@ -36,6 +36,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vuepress/client'
+import SafeRouterLink from '@components/SafeRouterLink.vue'
 import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/composables'
 
 import Pagation from '@components/Pagation.vue'

packages/vuepress-theme-reco/src/client/layouts/Timeline.vue

@@ -10,7 +10,11 @@
           <li v-for="(subItem, subIndex) in item.data" :key="subIndex" class="item">
             <span class="date">{{subItem.date}}</span>
 
-            <RouterLink class="title" :to="subItem.path">{{ subItem.title }}</RouterLink>
+            <!-- 使用SafeRouterLink组件，它内部已包含ClientOnly处理 -->
+            <SafeRouterLink v-if="subItem && subItem.path && typeof subItem.path === 'string'" 
+                          class="title" 
+                          :to="subItem.path">{{ subItem.title }}</SafeRouterLink>
+            <span v-else class="title">{{ subItem.title }}</span>
           </li>
         </ul>
       </li>
@@ -20,6 +24,7 @@
 
 <script setup lang="ts">
 import GenericContainer from '@components/GenericContainer/index.vue'
+import SafeRouterLink from '@components/SafeRouterLink.vue'
 import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/composables'
 
 import { formatISODate } from '@utils/other.js'