Nextjs getStaticPaths（静态生成）

Question

link to docs

假设以下目录结构

pages
  animals
    [animalName].tsx
  index.tsx

---

我的 [animalName].tsx

import { useRouter } from "next/router";
import { GetStaticPaths, GetStaticProps } from "next";

export const sleep = (ms: number) =>
  new Promise((resolve) => setTimeout(resolve, ms));

export const getStaticProps: GetStaticProps = async ({params}) => {
  await sleep(5000);
  return {
    props: {
      name: params.animalName,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    // only /animals/lion will be statically generated
    paths: [{ params: { animalName: "lion" } }],
    fallback: true,
  };
};

function AnimalName(props) {
  const router = useRouter();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      <h1>animal name from server - {props.name}</h1>
    </div>
  );
}

export default AnimalName;

---

假设我有

我的 index.tsx 中有两个链接

1. /动物/狮子
2. /动物/老虎

---

我的期望

1. 点击 /animals/tiger 时，我会先看到 Loading... 5 秒，然后组件会被重新渲染为新的道具

2. 点击/animals/lion，页面会在index页面停留5秒，然后突然跳转到/animals/lion

发生了什么 -

在这两种情况下，页面都在索引页面停留了 5 秒钟，然后我突然迁移到了 /animals/whatever

如果我试图直接在地址栏中输入网址，我所期望的会发生..

为什么会出现这种行为……我错过了什么吗？

谁能再详细点...

谢谢！！！