diff --git a/docs/v1/src/pages/docs/react/AsyncBoundary.en.mdx b/docs/v1/src/pages/docs/react/AsyncBoundary.en.mdx
index c96a7c555..2b6441f3f 100644
--- a/docs/v1/src/pages/docs/react/AsyncBoundary.en.mdx
+++ b/docs/v1/src/pages/docs/react/AsyncBoundary.en.mdx
@@ -50,7 +50,7 @@ type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
 
 <Callout type='warning'>
 
-deprecated: Use [wrap.ErrorBoundary().Suspense().on](./wrap), [wrap.ErrorBoundary().Suspense.CSROnly().on](./wrap) instead
+deprecated: Use [wrap.ErrorBoundary().Suspense().on](./wrap) instead
 
 </Callout>
 
diff --git a/docs/v1/src/pages/docs/react/AsyncBoundary.ko.mdx b/docs/v1/src/pages/docs/react/AsyncBoundary.ko.mdx
index 32dceae90..f033a3e30 100644
--- a/docs/v1/src/pages/docs/react/AsyncBoundary.ko.mdx
+++ b/docs/v1/src/pages/docs/react/AsyncBoundary.ko.mdx
@@ -52,7 +52,7 @@ type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
 
 <Callout type='warning'>
 
-deprecated: [wrap.ErrorBoundary().Suspense().on](./wrap), [wrap.ErrorBoundary().Suspense.CSROnly().on](./wrap)을 대신 사용하세요
+deprecated: [wrap.ErrorBoundary().Suspense().on](./wrap)을 대신 사용하세요
 
 </Callout>
 
diff --git a/docs/v1/src/pages/docs/react/Suspense.en.mdx b/docs/v1/src/pages/docs/react/Suspense.en.mdx
index 7196184da..e5d56b7b8 100644
--- a/docs/v1/src/pages/docs/react/Suspense.en.mdx
+++ b/docs/v1/src/pages/docs/react/Suspense.en.mdx
@@ -53,7 +53,7 @@ If you want to use Suspense working in both SSR/CSR, You can change `<Suspense c
 
 <Callout type='warning'>
 
-deprecated: Use [wrap.Suspense().on](./wrap), [wrap.Suspense.CSROnly().on](./wrap) instead
+deprecated: Use [wrap.Suspense().on](./wrap) instead
 
 </Callout>
 
diff --git a/docs/v1/src/pages/docs/react/Suspense.ko.mdx b/docs/v1/src/pages/docs/react/Suspense.ko.mdx
index 1d6e6758e..e1e5d5573 100644
--- a/docs/v1/src/pages/docs/react/Suspense.ko.mdx
+++ b/docs/v1/src/pages/docs/react/Suspense.ko.mdx
@@ -52,7 +52,7 @@ React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense csrO
 
 <Callout type='warning'>
 
-deprecated: [wrap.Suspense().on](./wrap), [wrap.Suspense.CSROnly().on](./wrap)을 사용하세요
+deprecated: [wrap.Suspense().on](./wrap)을 사용하세요
 
 </Callout>
 
diff --git a/docs/v1/src/pages/docs/why.en.mdx b/docs/v1/src/pages/docs/why.en.mdx
index 02820e0fd..fc056e338 100644
--- a/docs/v1/src/pages/docs/why.en.mdx
+++ b/docs/v1/src/pages/docs/why.en.mdx
@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 If you have used React Suspense in SSR environment like Next.js, you may encounter error like below.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-It's why [`<Suspense/>` and `<Suspense.CSROnly/>`](/docs/react/Suspense) is added in this library.
+It's why [`<Suspense csrOnly/>`](/docs/react/Suspense) is added in this library.
 
 ### ErrorBoundary more simply
 
diff --git a/docs/v1/src/pages/docs/why.ko.mdx b/docs/v1/src/pages/docs/why.ko.mdx
index b568180e9..1706801f2 100644
--- a/docs/v1/src/pages/docs/why.ko.mdx
+++ b/docs/v1/src/pages/docs/why.ko.mdx
@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 React Suspense를 Next.js와 같은 서버사이드 렌더링 환경에서 사용해본 적이 있다면 아마 종종 아래 사진과 같은 에러를 겪게 된 적이 있을 겁니다.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-이것이 [`<Suspense/>` 와 `<Suspense.CSROnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<Suspense csrOnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
 
 ### ErrorBoundary를 더욱 단순하게 사용하고 싶습니다.
 
diff --git a/docs/v2/src/pages/docs/react/Suspense.en.mdx b/docs/v2/src/pages/docs/react/Suspense.en.mdx
index 4701a5ca0..b6e15b5ae 100644
--- a/docs/v2/src/pages/docs/react/Suspense.en.mdx
+++ b/docs/v2/src/pages/docs/react/Suspense.en.mdx
@@ -27,24 +27,24 @@ Control multiple `<Suspense/>`s default fallback with `<SuspensiveProvider/>`. D
 
 </Callout>
 
-### Avoid Server side rendering (CSROnly)
+### Avoid Server side rendering (csrOnly)
 
-`<Suspense.CSROnly/>` will return fallback in server. After mount(in client) return children. Since mount only happens on the client, server-side rendering can be avoided.
+`<Suspense csrOnly/>` will return fallback in server. After mount(in client) return children. Since mount only happens on the client, server-side rendering can be avoided.
 
-```tsx /Suspense.CSROnly/
+```tsx /csrOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense csrOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-Migration support SSR gradually (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+Migration support SSR gradually (`<Suspense csrOnly/>` -> `<Suspense/>`)
 
-If you want to use Suspense working in both SSR/CSR, You can change `<Suspense.CSROnly/>` to `<Suspense/>` gradually.
+If you want to use Suspense working in both SSR/CSR, You can change `<Suspense csrOnly/>` to `<Suspense/>` gradually.
 
 </Callout>
diff --git a/docs/v2/src/pages/docs/react/Suspense.ko.mdx b/docs/v2/src/pages/docs/react/Suspense.ko.mdx
index 698d2d9e6..6b9f678b1 100644
--- a/docs/v2/src/pages/docs/react/Suspense.ko.mdx
+++ b/docs/v2/src/pages/docs/react/Suspense.ko.mdx
@@ -26,24 +26,24 @@ Default fallback
 
 </Callout>
 
-### 서버사이드 렌더링을 피하기 (CSROnly)
+### 서버사이드 렌더링을 피하기 (csrOnly)
 
-`<Suspense.CSROnly/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
+`<Suspense csrOnly/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
 
-```tsx /Suspense.CSROnly/
+```tsx /csrOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense csrOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense csrOnly/>` -> `<Suspense/>`)
 
-React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense.CSROnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
+React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense csrOnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
 
 </Callout>
diff --git a/docs/v2/src/pages/docs/why.en.mdx b/docs/v2/src/pages/docs/why.en.mdx
index 02820e0fd..fc056e338 100644
--- a/docs/v2/src/pages/docs/why.en.mdx
+++ b/docs/v2/src/pages/docs/why.en.mdx
@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 If you have used React Suspense in SSR environment like Next.js, you may encounter error like below.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-It's why [`<Suspense/>` and `<Suspense.CSROnly/>`](/docs/react/Suspense) is added in this library.
+It's why [`<Suspense csrOnly/>`](/docs/react/Suspense) is added in this library.
 
 ### ErrorBoundary more simply
 
diff --git a/docs/v2/src/pages/docs/why.ko.mdx b/docs/v2/src/pages/docs/why.ko.mdx
index b568180e9..1706801f2 100644
--- a/docs/v2/src/pages/docs/why.ko.mdx
+++ b/docs/v2/src/pages/docs/why.ko.mdx
@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 React Suspense를 Next.js와 같은 서버사이드 렌더링 환경에서 사용해본 적이 있다면 아마 종종 아래 사진과 같은 에러를 겪게 된 적이 있을 겁니다.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-이것이 [`<Suspense/>` 와 `<Suspense.CSROnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<Suspense csrOnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
 
 ### ErrorBoundary를 더욱 단순하게 사용하고 싶습니다.
 
diff --git a/packages/react/src/AsyncBoundary.tsx b/packages/react/src/AsyncBoundary.tsx
index f0019371b..cc72cce01 100644
--- a/packages/react/src/AsyncBoundary.tsx
+++ b/packages/react/src/AsyncBoundary.tsx
@@ -13,33 +13,45 @@ export interface AsyncBoundaryProps
   rejectedFallback: ErrorBoundaryProps['fallback']
 }
 
-const BaseAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundaryProps>(
-  ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
-    <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
-      <Suspense fallback={pendingFallback}>{children}</Suspense>
-    </ErrorBoundary>
-  )
-)
-if (process.env.NODE_ENV !== 'production') {
-  BaseAsyncBoundary.displayName = 'AsyncBoundary'
-}
-const CSROnly = forwardRef<ComponentRef<typeof ErrorBoundary>, Omit<AsyncBoundaryProps, 'csrOnly'>>(
-  ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
-    <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
-      <Suspense.CSROnly fallback={pendingFallback}>{children}</Suspense.CSROnly>
-    </ErrorBoundary>
-  )
-)
-if (process.env.NODE_ENV !== 'production') {
-  CSROnly.displayName = 'AsyncBoundary.CSROnly'
-}
-
 /**
  * @deprecated Use `<Suspense/>` and `<ErrorBoundary/>` instead
  */
-export const AsyncBoundary = Object.assign(BaseAsyncBoundary, {
-  /**
-   * @deprecated Use `<Suspense csrOnly />` and `<ErrorBoundary/>` instead
-   */
-  CSROnly,
-})
+export const AsyncBoundary = Object.assign(
+  (() => {
+    const BaseAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundaryProps>(
+      ({ csrOnly, pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
+        <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
+          <Suspense csrOnly={csrOnly} fallback={pendingFallback}>
+            {children}
+          </Suspense>
+        </ErrorBoundary>
+      )
+    )
+    if (process.env.NODE_ENV !== 'production') {
+      BaseAsyncBoundary.displayName = 'AsyncBoundary'
+    }
+
+    return BaseAsyncBoundary
+  })(),
+  {
+    /**
+     * @deprecated Use `<Suspense csrOnly />` and `<ErrorBoundary/>` instead
+     */
+    CSROnly: (() => {
+      const CSROnly = forwardRef<ComponentRef<typeof ErrorBoundary>, Omit<AsyncBoundaryProps, 'csrOnly'>>(
+        ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
+          <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
+            <Suspense csrOnly fallback={pendingFallback}>
+              {children}
+            </Suspense>
+          </ErrorBoundary>
+        )
+      )
+      if (process.env.NODE_ENV !== 'production') {
+        CSROnly.displayName = 'AsyncBoundary.CSROnly'
+      }
+
+      return CSROnly
+    })(),
+  }
+)
diff --git a/packages/react/src/Suspense.tsx b/packages/react/src/Suspense.tsx
index 37fa861ee..4a43a7ccf 100644
--- a/packages/react/src/Suspense.tsx
+++ b/packages/react/src/Suspense.tsx
@@ -36,7 +36,7 @@ export const Suspense = Object.assign(
   })(),
   {
     /**
-     * @deprecated Use <Suspense csrOnly /> instead
+     * @deprecated Use `<Suspense csrOnly/>` instead
      */
     CSROnly: (() => {
       const CSROnly = ({
diff --git a/packages/react/src/wrap.tsx b/packages/react/src/wrap.tsx
index b4ff8211d..8b6f61db7 100644
--- a/packages/react/src/wrap.tsx
+++ b/packages/react/src/wrap.tsx
@@ -170,9 +170,9 @@ export const withAsyncBoundary = Object.assign(
       asyncBoundaryProps: PropsWithoutChildren<AsyncBoundaryProps>
     ) => {
       const Wrapped = (props: TProps) => (
-        <AsyncBoundary.CSROnly {...asyncBoundaryProps}>
+        <AsyncBoundary {...asyncBoundaryProps} csrOnly>
           <Component {...props} />
-        </AsyncBoundary.CSROnly>
+        </AsyncBoundary>
       )
 
       if (process.env.NODE_ENV !== 'production') {
diff --git a/websites/visualization/src/app/react-await/page.tsx b/websites/visualization/src/app/react-await/page.tsx
index 58c9a4077..e3dfe20dc 100644
--- a/websites/visualization/src/app/react-await/page.tsx
+++ b/websites/visualization/src/app/react-await/page.tsx
@@ -8,7 +8,7 @@ export default function Page() {
   return (
     <ErrorBoundary fallback={() => <div>error</div>}>
       <div className="flex flex-col">
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -22,8 +22,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -37,8 +37,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -52,8 +52,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -67,11 +67,11 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
+        </Suspense>
       </div>
 
       <div className="flex flex-col">
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [3000] as const,
@@ -85,8 +85,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [4000] as const,
@@ -100,8 +100,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [4000] as const,
@@ -115,7 +115,7 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
+        </Suspense>
       </div>
     </ErrorBoundary>
   )
diff --git a/websites/visualization/src/app/react-image/page.tsx b/websites/visualization/src/app/react-image/page.tsx
index d23760c88..18093e3b9 100644
--- a/websites/visualization/src/app/react-image/page.tsx
+++ b/websites/visualization/src/app/react-image/page.tsx
@@ -5,7 +5,7 @@ import { Image } from '@suspensive/react-image'
 
 export default wrap
   .ErrorBoundary({ fallback: () => <div>error</div> })
-  .Suspense.CSROnly({ fallback: 'loading...' })
+  .Suspense({ csrOnly: true, fallback: 'loading...' })
   .on(function Page() {
     return (
       <div className="flex flex-col">
diff --git a/websites/visualization/src/app/react-query/page.tsx b/websites/visualization/src/app/react-query/page.tsx
index a8924b9ad..ac8c95e1c 100644
--- a/websites/visualization/src/app/react-query/page.tsx
+++ b/websites/visualization/src/app/react-query/page.tsx
@@ -17,19 +17,19 @@ export default wrap.ErrorBoundaryGroup({}).on(function Page() {
       </div>
       <Area title="QueryErrorResetBoundary + ErrorBoundary + Suspense">
         <ErrorBoundary onReset={queryErrorResetBoundary.reset} fallback={RejectedFallback}>
-          <Suspense.CSROnly fallback={<Spinner />}>
+          <Suspense csrOnly fallback={<Spinner />}>
             <UseSuspenseQuery queryKey={['query', 1] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
             <UseSuspenseQuery queryKey={['query', 2] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
-          </Suspense.CSROnly>
+          </Suspense>
         </ErrorBoundary>
       </Area>
 
       <Area title="QueryErrorBoundary + Suspense">
         <QueryErrorBoundary fallback={RejectedFallback}>
-          <Suspense.CSROnly fallback={<Spinner />}>
+          <Suspense csrOnly fallback={<Spinner />}>
             <UseSuspenseQuery queryKey={['query', 3] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
             <UseSuspenseQuery queryKey={['query', 4] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
-          </Suspense.CSROnly>
+          </Suspense>
         </QueryErrorBoundary>
       </Area>
     </Area>
diff --git a/websites/visualization/src/app/react/page.tsx b/websites/visualization/src/app/react/page.tsx
index 0069f2877..24f296ead 100644
--- a/websites/visualization/src/app/react/page.tsx
+++ b/websites/visualization/src/app/react/page.tsx
@@ -21,19 +21,19 @@ export default function Page() {
               <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>↻</Button>} />
             </div>
             <Area title="Suspense (Continuous 3 fetching)">
-              <Suspense.CSROnly fallback={<Spinner />}>
+              <Suspense csrOnly fallback={<Spinner />}>
                 <UseSuspenseQuery queryKey={['boundary', 1]} queryFn={() => api.delay(500, { percentage: 100 })} />
                 <UseSuspenseQuery queryKey={['boundary', 2]} queryFn={() => api.delay(1000, { percentage: 100 })} />
                 <UseSuspenseQuery queryKey={['boundary', 3]} queryFn={() => api.delay(1500, { percentage: 100 })} />
-              </Suspense.CSROnly>
+              </Suspense>
             </Area>
 
             <Area title="ErrorBoundary (100% Error)">
               <ErrorBoundary onReset={queryErrorResetBoundary.reset} fallback={RejectedFallback}>
-                <Suspense.CSROnly fallback={<Spinner />}>
+                <Suspense csrOnly fallback={<Spinner />}>
                   <UseSuspenseQuery queryKey={['boundary', 4]} queryFn={() => api.delay(500, { percentage: 0 })} />
                   <UseSuspenseQuery queryKey={['boundary', 5]} queryFn={() => api.delay(500, { percentage: 100 })} />
-                </Suspense.CSROnly>
+                </Suspense>
               </ErrorBoundary>
             </Area>
           </ErrorBoundaryGroup>
@@ -45,17 +45,17 @@ export default function Page() {
               <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>↻</Button>} />
             </div>
             <Area title="Suspense">
-              <Suspense.CSROnly fallback={<Spinner />}>
+              <Suspense csrOnly fallback={<Spinner />}>
                 <UseSuspenseQuery queryKey={['boundary', 1]} queryFn={() => api.delay(500, { percentage: 100 })} />
-              </Suspense.CSROnly>
+              </Suspense>
             </Area>
 
             <Area title="ErrorBoundary (100% Error)">
               <ErrorBoundary onReset={queryErrorResetBoundary.reset} fallback={RejectedFallback}>
-                <Suspense.CSROnly fallback={<Spinner />}>
+                <Suspense csrOnly fallback={<Spinner />}>
                   <UseSuspenseQuery queryKey={['boundary', 4]} queryFn={() => api.delay(500, { percentage: 0 })} />
                   <UseSuspenseQuery queryKey={['boundary', 5]} queryFn={() => api.delay(500, { percentage: 100 })} />
-                </Suspense.CSROnly>
+                </Suspense>
               </ErrorBoundary>
             </Area>
           </ErrorBoundaryGroup>
@@ -63,10 +63,10 @@ export default function Page() {
 
         <Area title="ErrorBoundary (100% Error)">
           <ErrorBoundary onReset={queryErrorResetBoundary.reset} fallback={RejectedFallback}>
-            <Suspense.CSROnly fallback={<Spinner />}>
+            <Suspense csrOnly fallback={<Spinner />}>
               <UseSuspenseQuery queryKey={['boundary', 4]} queryFn={() => api.delay(500, { percentage: 0 })} />
               <UseSuspenseQuery queryKey={['boundary', 5]} queryFn={() => api.delay(500, { percentage: 100 })} />
-            </Suspense.CSROnly>
+            </Suspense>
           </ErrorBoundary>
         </Area>
       </ErrorBoundaryGroup>
diff --git a/websites/visualization/src/app/react/wrap/page.tsx b/websites/visualization/src/app/react/wrap/page.tsx
index c32ff55bb..5ce04fc93 100644
--- a/websites/visualization/src/app/react/wrap/page.tsx
+++ b/websites/visualization/src/app/react/wrap/page.tsx
@@ -7,7 +7,7 @@ const logError = (error: Error) => console.error(error)
 const Page = wrap
   .ErrorBoundaryGroup({ blockOutside: false })
   .ErrorBoundary({ fallback: (props) => <div>{props.error.message}</div>, onError: logError })
-  .Suspense.CSROnly({ fallback: 'loading...' })
+  .Suspense({ csrOnly: true, fallback: 'loading...' })
   .on(function Page({ text }: { text: string }) {
     const errorBoundary = useErrorBoundary()