fix: fix update of snapshot cache

alibaba · Nov 6, 2023 · 92cd154 · 92cd154
1 parent 54b85a2
commit 92cd154
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/examples/with-first-chunk-cache-ssr/src/document.tsx b/examples/with-first-chunk-cache-ssr/src/document.tsx
@@ -7,6 +7,7 @@ function Document() {
         <meta charSet="utf-8" />
         <meta name="description" content="ICE 3.0 Demo" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style dangerouslySetInnerHTML={{ __html: ' body {margin: 0px;}' }} />
         <Meta />
         <Title />
         <Links />

diff --git a/packages/ice/src/middlewares/renderMiddleware.ts b/packages/ice/src/middlewares/renderMiddleware.ts
@@ -48,6 +48,7 @@ export default function createRenderMiddleware(options: Options): Middleware {
           req,
           res,
         };
+        res.setHeader('fcc-enable', 'true');
         serverModule.renderToResponse(requestContext, {
           renderMode,
           documentOnly,

diff --git a/packages/runtime/src/Document.tsx b/packages/runtime/src/Document.tsx
@@ -207,23 +207,31 @@ export const FirstChunkCache: FirstChunkCacheType = () => {
 export type SnapshotCacheType = () => JSX.Element;
 
 function Snapshot(rootId) {
+  // Run before </html>.
   const SNAPSHOT_ID = 'fcc-snapshot';
   const FCC_FLAG = decodeURIComponent('%3C!--fcc--%3E');
-  // Template before stream.
+  // Cache template before stream.
   const iceContainerEle = document.getElementById(rootId);
   let snapshot = document.documentElement.outerHTML;
+
   window.addEventListener('stream-end', () => {
-    // Remove snapshot when stream-end.
+    // Remove snapshot when stream-end event.
     const snapshotEle = document.getElementById(SNAPSHOT_ID);
-    snapshotEle && (snapshotEle.innerHTML = null);
+    const snapshotOuterHTML = snapshotEle.outerHTML;
+    if (snapshotEle) {
+      snapshotEle.removeAttribute('style');
+      snapshotEle.innerHTML = '';
+    }
+
     const hasCacheFlag = snapshot.indexOf(FCC_FLAG) >= 0;
     if (hasCacheFlag) {
       let cacheStr = snapshot.split(FCC_FLAG)[0] + FCC_FLAG;
       const style = 'position:absolute;width:100%;top:0;left:0;z-index:999';
-      cacheStr = cacheStr.replace(`<div id="${SNAPSHOT_ID}"></div>`, `<div id="${SNAPSHOT_ID}" style="${style}">${iceContainerEle.innerHTML}</div>`);
+      cacheStr = cacheStr.replace(snapshotOuterHTML, `<div id="${SNAPSHOT_ID}" style="${style}">${iceContainerEle.innerHTML}</div>`);
       console.log('cacheStr', cacheStr);
-      if (!window.__windvane__) return;
-      window.__windvane__.call('WVClient.setCache', {
+      let mega = (window as any).__megability_bridge__;
+      if (!mega) return;
+      mega.asyncCall('ssr', 'setFirstChunkCache', {
         html: cacheStr,
       });
       console.log('cache success');