diff --git a/src/client/app/data.ts b/src/client/app/data.ts
index 09da9662b7dd..e2aa66884280 100644
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@@ -1,4 +1,4 @@
-import { InjectionKey, Ref, ref, readonly, computed, inject } from 'vue'
+import { InjectionKey, Ref, shallowRef, readonly, computed, inject } from 'vue'
 import { Route } from './router'
 import serializedSiteData from '@siteData'
 import { resolveSiteDataByRoute, PageData, SiteData } from '../shared'
@@ -20,7 +20,7 @@ export interface VitePressData<T = any> {
 // site data is a singleton
 export type SiteDataRef<T = any> = Ref<SiteData<T>>
 
-export const siteDataRef: Ref<SiteData> = ref(parse(serializedSiteData))
+export const siteDataRef: Ref<SiteData> = shallowRef(parse(serializedSiteData))
 
 function parse(data: string): SiteData {
   return readonly(JSON.parse(data)) as SiteData
diff --git a/src/client/app/router.ts b/src/client/app/router.ts
index b7261ab4403a..c1283a424645 100644
--- a/src/client/app/router.ts
+++ b/src/client/app/router.ts
@@ -77,7 +77,9 @@ export function createRouter(
 
         route.path = pendingPath
         route.component = markRaw(comp)
-        route.data = readonly(JSON.parse(__pageData)) as PageData
+        route.data = import.meta.env.PROD
+          ? markRaw(JSON.parse(__pageData))
+          : (readonly(JSON.parse(__pageData)) as PageData)
 
         if (inBrowser) {
           nextTick(() => {
@@ -94,7 +96,7 @@ export function createRouter(
           })
         }
       }
-    } catch (err) {
+    } catch (err: any) {
       if (!err.message.match(/fetch/)) {
         console.error(err)
       }