diff --git a/.changeset/seven-mails-tickle.md b/.changeset/seven-mails-tickle.md
new file mode 100644
index 0000000000..641088629f
--- /dev/null
+++ b/.changeset/seven-mails-tickle.md
@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+feat: support suspense event
diff --git a/examples/with-suspense-ssr/src/document.tsx b/examples/with-suspense-ssr/src/document.tsx
index 195d21a7f1..313c827d5c 100644
--- a/examples/with-suspense-ssr/src/document.tsx
+++ b/examples/with-suspense-ssr/src/document.tsx
@@ -13,6 +13,7 @@ function Document() {
       </head>
       <body>
         <Main />
+        <script dangerouslySetInnerHTML={{ __html: 'window.addEventListener(\'suspense\', (d) => console.log(\'suspence event=\', d))' }} />
         <Scripts async />
       </body>
     </html>
diff --git a/packages/runtime/src/Suspense.tsx b/packages/runtime/src/Suspense.tsx
index 5323436308..239ebcbb4c 100644
--- a/packages/runtime/src/Suspense.tsx
+++ b/packages/runtime/src/Suspense.tsx
@@ -156,6 +156,7 @@ export function withSuspense(Component) {
         <SuspenseContext.Provider value={suspenseState}>
           <Component {...componentProps} />
           <Data id={id} />
+          <script dangerouslySetInnerHTML={{ __html: `window.dispatchEvent(new CustomEvent('suspense', { detail: { id: '${id}' } }));` }} />
         </SuspenseContext.Provider>
       </React.Suspense>
     );
@@ -166,6 +167,6 @@ function Data(props) {
   const data = useSuspenseData();
 
   return (
-    <script dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${JSON.stringify(data)}}();` }} />
+    <script id={props.id} dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${JSON.stringify(data)}}();` }} />
   );
 }
