demo complete

src/app/page.js

+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 import Image from "next/image";
 import React, { useState, useEffect } from "react";
+let currentIndex = 0;
+
 export default function Home() {
   const [data, setData] = useState("");
+  const [displayedData, setDisplayedData] = useState("");
 
   const fetchData = async () => {
     const response = await fetch("/api");
@@ -14,15 +18,25 @@ export default function Home() {
       const { value, done } = await reader.read();
       if (done) break;
       result += decoder.decode(value); //拼接结果
-      setData(
-        (prevData) =>
-          `${prevData} <br /> <span class='bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-violet-500 text-base'>${decoder.decode(
-            value
-          )}</span> `
-      );
+      setData((prevData) => `${prevData} ${decoder.decode(value)}`);
     }
   };
 
+  useEffect(() => {
+    if (!data || !data[currentIndex]) return;
+
+    const intervalId = setInterval(() => {
+      if (currentIndex < data.length) {
+        setDisplayedData((prev) => prev + (data[currentIndex] || ""));
+        currentIndex++;
+      } else {
+        clearInterval(intervalId);
+      }
+    }, 50); // 控制打字速度，值越小速度越快
+
+    return () => clearInterval(intervalId);
+  }, [data]);
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
@@ -61,21 +75,35 @@ export default function Home() {
         />
       </div>
 
-      <div className="mb-32 grid text-center lg:text-left w-full">
+      <div className="mb-32 flex text-center lg:text-left w-full gap-4">
         <a
-          className="group rounded-lg border border-transparent px-5 py-4 bg-white"
+          className="group rounded-lg border border-transparent px-5 py-4 bg-white flex-1"
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{" "}
+            直接渲染{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p
-            className={`m-0 text-sm opacity-50`}
-            dangerouslySetInnerHTML={{ __html: data }}
-          ></p>
+          <p className={`m-0 text-sm bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-green-500 text-base`}>{data || "pending..."}</p>
+        </a>
+
+        <a
+          className="group rounded-lg border border-transparent px-5 py-4 bg-white flex-1"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            打字渲染{" "}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 text-sm `}>
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-violet-500 text-base">
+              {displayedData || "pending..."}
+            </span>
+          </p>
         </a>
       </div>
     </main>