首页加载时的悬念回退 SSR NextJs 14 在 Safari 上不起作用（在 Chrome 上有效）

Question

拥有简单的页面，其中包含简单的子组件，例如：

import { Suspense } from "react";

async function BlogPosts() {
  let res = await fetch("https://httpbin.org/delay/5", { cache: "no-store" });
  let resjson = await res.json();

  return <div>{resjson.url}</div>;
}

async function Page() {
  return (
    <div>
      <h1>H E A D E R</h1>
      <div>
        <Suspense fallback={<div>{"fallback  ->  loading..."}</div>}>
          <BlogPosts />
        </Suspense>
      </div>
    </div>
  );
}

export default Page;

尝试第一次在 Safari 上打开页面，直到

BlogPosts

完成获取数据为止没有任何反应。在 Chrome 上做同样的事情，立即可见

H E A D E R

和

loading...

，然后在获取完成后显示主机而不是加载小部件。 网上的每个教程都会在 Chrome 上进行尝试，但不会在 Safari 上进行尝试。 有没有任何解决方法可以解决这个破坏用户对我的页面的感觉的问题 - 2 秒页面加载。

Answer 1

fallback={<div><_here_must_be_at_least_1kb_></div>}