feat: support first chunk cache (#6607)

* feat: support first chunk cache

* chore: remove cacheFirstChunk

* chore: modify fcc comment

* feat: add FirstChunkCache function

* feat: add first chunk demo

* chore: modify example

* chore: update lock

* chore: update package

examples/with-fitst-chunk-cache-ssr/ice.config.mts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig({
+  ssr: true,
+});

examples/with-fitst-chunk-cache-ssr/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@examples/with-first-chunk-cache-ssr",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "ICE example with first chunk cache ssr",
+  "author": "ICE Team",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6"
+  }
+}

examples/with-fitst-chunk-cache-ssr/src/app.tsx

@@ -0,0 +1,10 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig({
+  app: {
+    rootId: 'app',
+  },
+  cache: {
+    firstChunk: true,
+  },
+});

examples/with-fitst-chunk-cache-ssr/src/components/Box/index.module.css

@@ -0,0 +1,11 @@
+.box {
+  display: flex;
+  width: 100%;
+  height: 100px;
+  flex-direction: row;
+  background-color: white;
+}
+
+.item {
+  flex: 1;
+}

examples/with-fitst-chunk-cache-ssr/src/components/Box/index.tsx

@@ -0,0 +1,44 @@
+import { useSuspenseData, withSuspense } from 'ice';
+import logo from '../../../ice.png';
+import styles from './index.module.css';
+
+const Item = withSuspense((props) => {
+  console.log('Render: Item');
+
+  return (
+    (<div className={styles.item}>
+      <img src={props.src} height="100" width="100" />
+    </div>)
+  );
+});
+
+function Box() {
+  const data = useSuspenseData(getData);
+  console.log('Render: Box');
+
+  return (
+    <div className={styles.box}>
+      {
+        data.map((item, index) => {
+          return <Item id="Item" key={index} src={item} />;
+        })
+      }
+    </div>
+  );
+}
+
+export default withSuspense(Box);
+
+async function getData() {
+  console.log('load box');
+
+  await new Promise<any>((resolve) => {
+    setTimeout(() => resolve(null), 1000);
+  });
+
+  return [
+    logo,
+    logo,
+    logo,
+  ];
+}

examples/with-fitst-chunk-cache-ssr/src/components/List/index.module.css

@@ -0,0 +1,18 @@
+.list {
+  background-color: rgba(0,0,0,.03);
+}
+
+.item{
+  padding: 20px;
+  background-color: aliceblue;
+  margin: 20px;
+  display: flex;
+}
+
+.image {
+  padding: 10px;
+}
+
+.title {
+  padding: 15px 0px;
+}

examples/with-fitst-chunk-cache-ssr/src/components/List/index.tsx

@@ -0,0 +1,75 @@
+import { useSuspenseData, withSuspense } from 'ice';
+import logo from '../../../ice.png';
+import styles from './index.module.css';
+
+const Item = withSuspense((props) => {
+  console.log('Render: List');
+
+  return (
+    (<div className={styles.item} >
+      <img className={styles.image} src={props.src} alt="logo" height="100" width="100" />
+      <div>
+        <div className={styles.title}>{props.title}</div>
+        <div>{props.description}</div>
+      </div>
+    </div>)
+  );
+});
+
+function List() {
+  const data = useSuspenseData(getData);
+  console.log('Render: List');
+
+  return (
+    <div className={styles.list}>
+      {
+        data.map(item => {
+          return (<Item
+            id="Item"
+            description={item.description}
+            src={item.logo}
+            title={item.title}
+          />);
+        })
+      }
+    </div>
+  );
+}
+
+export default withSuspense(List);
+
+async function getData() {
+  console.log('load list');
+
+  await new Promise<any>((resolve) => {
+    setTimeout(() => resolve(null), 2000);
+  });
+
+  return [
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+  ];
+}

examples/with-fitst-chunk-cache-ssr/src/document.tsx

@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE 3.0 Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts async />
+      </body>
+    </html>
+  );
+}
+
+export default Document;

examples/with-fitst-chunk-cache-ssr/src/pages/index.module.css

@@ -0,0 +1,63 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app > header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+} 
+
+.app > header > img {
+  width: 120px;
+}
+
+.app > header > p {
+  margin: 20px 0;
+  text-align: center;
+  font-size: 2.6rem;
+}
+
+.app > main {
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0 10px;
+  font-size: 0.9rem;
+}
+
+.boxFallback {
+  background: rgba(0,0,0,.03);
+  border-radius: 3.2vw;
+  height: 100px;
+}
+
+.header {
+  background: linear-gradient(to bottom right, rgb(2, 46, 244), rgb(46, 40, 150));
+  height: 100px;
+  width: 100%;
+  font-size: 22px;
+  align-items: center;
+  line-height: 100px;
+  text-align: center;
+  color: #FFF;
+}
+
+.link {
+  font-size: 1.2rem;
+  color: var(--primary);
+}
+
+.button {
+  outline: none;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 35px;
+  background: var(--primary);
+  box-shadow: 0 5px 10px 0 #ddd;
+  font-size: calc(10px + 2vmin);
+}

examples/with-fitst-chunk-cache-ssr/src/pages/index.tsx

@@ -0,0 +1,26 @@
+import styles from './index.module.css';
+import List from '@/components/List/index';
+import Box from '@/components/Box/index';
+
+
+export default function Home() {
+  console.log('Render: Home');
+
+  return (
+    <div>
+      <Header />
+      <Box id="Box" fallback={<div className={styles.boxFallback} />} />
+      <List id="List" fallback={<div className={styles.boxFallback} />} />
+      {/* https://github.com/xiaoxiaojx/blog/issues/37 */}
+      <div dangerouslySetInnerHTML={{ __html: '<div style="height:0;width:0;">\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b</div>' }} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div className={styles.header} >
+      First chunk Demo
+    </div>
+  );
+}

examples/with-fitst-chunk-cache-ssr/src/typings.d.ts

@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />

examples/with-fitst-chunk-cache-ssr/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}

packages/runtime/src/Document.tsx

@@ -192,15 +192,30 @@ export const Data: DataType = (props: DataProps) => {
   );
 };
 
+/**
+ * Flag of first chunk cache.
+ */
+export type FirstChunkCacheType = () => JSX.Element;
+
+export const FirstChunkCache: FirstChunkCacheType = () => {
+  return <div dangerouslySetInnerHTML={{ __html: '<!--fcc-->' }} />;
+};
+
 export type MainType = (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
 export const Main: MainType = (props: React.HTMLAttributes<HTMLDivElement>) => {
   const { main } = useDocumentContext();
   const { appConfig } = useAppContext();
+
   return (
-    <div id={appConfig.app.rootId} {...props}>
-      {main}
-    </div>
+    <>
+      <div id={appConfig.app.rootId} {...props}>
+        {main}
+      </div>
+      {
+        appConfig.cache?.firstChunk && <FirstChunkCache />
+      }
+    </>
   );
 };
 

packages/runtime/src/runServerApp.tsx

@@ -403,6 +403,7 @@ async function renderServerEntry(
       <AppRouter routes={routes} routerContext={routerContext} />
     ),
   };
+
   const element = (
     <AppContextProvider value={appContext}>
       <AppRuntimeProvider>

packages/runtime/src/types.ts

@@ -67,6 +67,9 @@ export interface AppConfig {
     basename?: string;
     initialEntries?: InitialEntry[];
   };
+  cache?: {
+    firstChunk?: boolean;
+  };
 }
 
 export interface RoutesConfig {