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");
    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8"); //二进制转换
    let result = "";

    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      result += decoder.decode(value); //拼接结果
      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">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.js</code>
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div onClick={fetchData}>
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert cursor-pointer"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

      <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 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 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>
  );
}