Vue3+Vite+Koa SSR报错：Hydration completed but contains mismatches

我正在将现有Vue3前端项目通过Vite、Vue3、Pinia、vue-i18n和Koa改造为SSR项目，执行pnpm dev（对应脚本为ts-node-esm server-dev.ts）时，控制台抛出以下警告：

entry-client.ts:19 [Vue warn]: Hydration node mismatch:

• Client vnode: Symbol(v-fgt)
• Server rendered DOM:
  

entry-client.ts:19 Hydration completed but contains mismatches.

目前的问题是SSR未生效，页面中的<!--ssr-outlet-->标记没有被渲染后的HTML替换，页面呈现空白状态，但同技术栈的参考SSR项目可以正常完成替换。

排查过程中发现几个可能引发问题的点：

• 使用了Vue3的Teleport组件，代码片段如下：

<template>
  <Teleport to="body" :disabled="showAlert">
    <Transition name="alert">
      <div v-if="showAlert" class="mask">
        ...
      </div>
    </Transition>
  </Teleport>
</template>

• 存在直接操作原生DOM的代码：

// 设置主题，仅支持两种模式：浅色（空字符串）和深色
setKUNGalgameTheme(theme: '' | 'dark') {
  this.showKUNGalgameMode = theme
  document.documentElement.className = theme
}

• 直接使用浏览器环境的fetch API发起后端请求：

// 封装的请求函数
const kunFetchRequest = async <T>(
  url: string,
  options: FetchOptions
): Promise<T> => {
  const baseUrl = import.meta.env.VITE_API_BASE_URL
  const fullUrl = `${baseUrl}${url}`

  // 请求头添加token
  const headers = {
    ...options.headers,
    Authorization: `Bearer ${useKUNGalgameUserStore().getToken()}`,
  }

  const response = await fetch(fullUrl, { ...options, headers })

  // 非20X状态码抛出错误
  if (!successResponseArray.includes(response.status)) {
    // 处理错误，比如token过期
    await onRequestError(response)
    throw new Error('KUNGalgame Fetch Error occurred, but no problem')
  }

  const data: T = await response.json()
  return data
}

已经查阅过相关技术讨论，但当前报错未明确指出具体是哪个组件导致的不匹配，无法定位问题根源。

内容的提问来源于stack exchange，提问作者kun1007