render body with CSR when SSR is skipped

apps/app/src/pages/[[...path]].page.tsx

@@ -46,6 +46,7 @@ import { getServerSidePropsForInitial, getServerSidePropsForSameRoute } from './
 import type {
   Props, InitialProps, SameRouteEachProps, IPageToShowRevisionWithMeta,
 } from './[[...path]]/types';
+import { useInitialCSRFetch } from './[[...path]]/use-initial-skip-ssr-fetch';
 import type { NextPageWithLayout } from './_app.page';
 import { NextjsRoutingType, detectNextjsRoutingType } from './utils/nextjs-routing-utils';
 import { useCustomTitleForPage } from './utils/page-title-customization';
@@ -157,6 +158,9 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   useSameRouteNavigation();
   useShallowRouting(props);
 
+  // If initial props and skipSSR, fetch page data on client-side
+  useInitialCSRFetch(isInitialProps(props) && props.skipSSR);
+
   // Optimized effects with minimal dependencies
   useEffect(() => {
     // Load YJS data only when revision changes and page exists

apps/app/src/pages/[[...path]]/use-initial-skip-ssr-fetch.ts

@@ -0,0 +1,24 @@
+
+import { useEffect } from 'react';
+
+import { useFetchCurrentPage } from '~/states/page';
+
+
+/**
+ * useInitialCSRFetch
+ *
+ * Fetches current page data on client-side if shouldFetch === true
+ *
+ * @param shouldFetch - Whether SSR is skipped (from props)
+ */
+export const useInitialCSRFetch = (
+    shouldFetch?: boolean,
+): void => {
+  const { fetchCurrentPage } = useFetchCurrentPage();
+
+  useEffect(() => {
+    if (shouldFetch) {
+      fetchCurrentPage();
+    }
+  }, [fetchCurrentPage, shouldFetch]);
+};