diff --git a/lerna.json b/lerna.json
index 89763cc..e1a302a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0"
+  "version": "0.1.1"
 }
diff --git a/packages/fronts-bundler/package.json b/packages/fronts-bundler/package.json
index f878149..cf40a18 100644
--- a/packages/fronts-bundler/package.json
+++ b/packages/fronts-bundler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fronts-bundler",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
diff --git a/packages/fronts-react/package.json b/packages/fronts-react/package.json
index 1dca3bb..0eed768 100644
--- a/packages/fronts-react/package.json
+++ b/packages/fronts-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fronts-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "unpkg": "dist/index.umd.js",
@@ -16,7 +16,7 @@
     "react": "^16.13.0"
   },
   "dependencies": {
-    "fronts": "^0.1.0"
+    "fronts": "^0.1.1"
   },
   "devDependencies": {
     "@types/react": "^16.13.0",
diff --git a/packages/fronts-react/src/useApp.tsx b/packages/fronts-react/src/useApp.tsx
index 02e7653..dca711e 100644
--- a/packages/fronts-react/src/useApp.tsx
+++ b/packages/fronts-react/src/useApp.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
-import { injectStyle, loadApp, Render, unmount } from 'fronts';
+import { getUid, injectStyle, loadApp, Render, unmount } from 'fronts';
 import { AppWrapper, UseApp } from './interface';
 
 /**
@@ -38,13 +38,9 @@ export const useApp: UseApp = (options) => {
           callback && callback();
         };
       }, []);
+      const uid = getUid(options.name);
       return (
-        <div
-          ref={rootRef}
-          data-fronts={options?.name}
-          data-render={Date.now()}
-          {...options.attrs}
-        >
+        <div ref={rootRef} data-fronts={uid} {...options.attrs}>
           <div ref={renderRef}></div>
         </div>
       );
diff --git a/packages/fronts-react/src/useIframe.tsx b/packages/fronts-react/src/useIframe.tsx
index 465d0dc..977a7fd 100644
--- a/packages/fronts-react/src/useIframe.tsx
+++ b/packages/fronts-react/src/useIframe.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { getIframeUrl } from 'fronts';
+import { getIframeUrl, getUid } from 'fronts';
 import { UseIframe } from './interface';
 
 /**
@@ -22,7 +22,7 @@ export const useIframe: UseIframe = ({ name, url = '', attrs = {} }) => {
             setIframeUrl(url);
           });
       }, []);
-      const uid = Math.random().toString(36).slice(2, -1);
+      const uid = getUid(name);
       return iframeUrl ? (
         <iframe frameBorder="no" {...attrs} src={iframeUrl} data-fronts={uid} />
       ) : null;
diff --git a/packages/fronts-react/src/useWebComponents.tsx b/packages/fronts-react/src/useWebComponents.tsx
index ff4eda8..d4e4f17 100644
--- a/packages/fronts-react/src/useWebComponents.tsx
+++ b/packages/fronts-react/src/useWebComponents.tsx
@@ -7,6 +7,7 @@ import {
   injectStyle,
   unmount,
   retargetEvents,
+  getUid,
 } from 'fronts';
 import { AppWrapper, UseWebComponents } from './interface';
 
@@ -48,7 +49,8 @@ export const useWebComponents: UseWebComponents = (options) => {
           callback && callback();
         };
       }, []);
-      return <fronts-app />;
+      const uid = getUid(options.name);
+      return <fronts-app data-fronts={uid} />;
     }),
     [loaded]
   );
diff --git a/packages/fronts-test/package.json b/packages/fronts-test/package.json
index 546f1e4..e64e289 100644
--- a/packages/fronts-test/package.json
+++ b/packages/fronts-test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fronts-test",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
diff --git a/packages/fronts-transport/package.json b/packages/fronts-transport/package.json
index f2aae71..f650488 100644
--- a/packages/fronts-transport/package.json
+++ b/packages/fronts-transport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fronts-transport",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "unpkg": "dist/index.umd.js",
diff --git a/packages/fronts/package.json b/packages/fronts/package.json
index 8453dfb..ae0e945 100644
--- a/packages/fronts/package.json
+++ b/packages/fronts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fronts",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "unpkg": "dist/index.umd.js",
@@ -13,7 +13,7 @@
     "data-transport": "^2.0.1"
   },
   "dependencies": {
-    "fronts-transport": "^0.1.0"
+    "fronts-transport": "^0.1.1"
   },
   "author": "unadlib",
   "license": "MIT"
diff --git a/packages/fronts/src/getUid.ts b/packages/fronts/src/getUid.ts
new file mode 100644
index 0000000..9f09f5b
--- /dev/null
+++ b/packages/fronts/src/getUid.ts
@@ -0,0 +1,2 @@
+export const getUid = (name: string) =>
+  `${name}-${Math.random().toString(36).slice(2, -1)}`;
diff --git a/packages/fronts/src/index.ts b/packages/fronts/src/index.ts
index 8bfb1f5..2e0a395 100644
--- a/packages/fronts/src/index.ts
+++ b/packages/fronts/src/index.ts
@@ -17,3 +17,4 @@ export * from './injectStyle';
 export * from './getMeta';
 export * from './unmount';
 export * from './retargetEvents';
+export * from './getUid';
diff --git a/packages/fronts/src/useApp.ts b/packages/fronts/src/useApp.ts
index 5f4153b..530ffcd 100644
--- a/packages/fronts/src/useApp.ts
+++ b/packages/fronts/src/useApp.ts
@@ -1,3 +1,4 @@
+import { getUid } from './getUid';
 import { injectStyle } from './injectStyle';
 import { UseApp } from './interface';
 import { loadApp } from './loadApp';
@@ -19,8 +20,8 @@ export const useApp: UseApp = (options) => {
       );
     }
     const rootNode = document.createElement('div');
-    rootNode.setAttribute('data-fronts', options.name ?? 'undefined');
-    rootNode.setAttribute('data-time', Date.now().toString());
+    const uid = getUid(options.name);
+    rootNode.setAttribute('data-fronts', uid);
     const attributes: Record<string, any> = options.attrs ?? {};
     for (const key in attributes) {
       rootNode.setAttribute(key, attributes[key]);
diff --git a/packages/fronts/src/useIframe.ts b/packages/fronts/src/useIframe.ts
index feee9e7..7e5a26f 100644
--- a/packages/fronts/src/useIframe.ts
+++ b/packages/fronts/src/useIframe.ts
@@ -1,3 +1,4 @@
+import { getUid } from './getUid';
 import { getScriptLink } from './importApp';
 import { UseIframe } from './interface';
 
@@ -35,7 +36,7 @@ export const getIframeUrl = async (siteName: string) => {
 export const useIframe: UseIframe = async ({ target, name, url, attrs }) => {
   const iframe = document.createElement('iframe');
   iframe.src = url ?? (await getIframeUrl(name));
-  const uid = Math.random().toString(36).slice(2, -1);
+  const uid = getUid(name);
   iframe.setAttribute('frameBorder', 'no');
   const attributes: Record<string, any> = attrs ?? {};
   for (const key in attributes) {
diff --git a/packages/fronts/src/useWebComponents.ts b/packages/fronts/src/useWebComponents.ts
index 98b1809..c4f1a3a 100644
--- a/packages/fronts/src/useWebComponents.ts
+++ b/packages/fronts/src/useWebComponents.ts
@@ -1,3 +1,4 @@
+import { getUid } from './getUid';
 import { injectStyle } from './injectStyle';
 import { DefineCustomElementOptions, UseWebComponents } from './interface';
 import { loadApp } from './loadApp';
@@ -52,6 +53,8 @@ export const useWebComponents: UseWebComponents = (options) => {
       );
     }
     const customElement = document.createElement('fronts-app');
+    const uid = getUid(options.name);
+    customElement.setAttribute('data-fronts', uid);
     options.target.appendChild(customElement);
     const { node, injectedRoot } = defineCustomElement({
       shadowMode: options.shadowMode,