NextJS 和 json-server 使用 getStaticPaths 在本地主机上加载缓慢

Question

NextJS 和 json-server 使用 getStaticPaths 在本地主机上加载缓慢

我正在构建小型电子商务网站，并设置了我的索引页面来生成静态道具以及我的个人产品页面，因为我们还没有很多产品。我遇到的问题是每次用户点击时加载速度都非常慢，就好像我错过了 NextJS 中数据获取工作方式的一些关键内容一样。以下是下面的片段，完整的项目可以在以下位置找到： https: //github.com/danieltosaba/framer-motion

索引页

export default function Home({ blankets }: HomeProps) {
  const classes = useStyles();
  return (
    <motion.div exit={{ opacity: 0 }} initial={{opacity: 0}} animate={{opacity: 1}}>
      <div>
        <Head>
          <title>Framer Motion Transitions</title>
        </Head>
        <main>
            <Grid container spacing={2}>
              <Grid item xs={12}>
                <h1>CHOOSE YOUR BLANKET</h1>
              </Grid>
              {blankets.map((blanket) => (
                <Grid key={blanket.id} item xs={12} sm={6} lg={4}>
                  <Card>
                    <Link href="/product/[id]" as={`/product/${blanket.id}`}>
                      <a>
                        <img
                          src={blanket.imageUrl.cover}
                          alt={blanket.name}
                          className={classes.image}
                        />
                      </a>
                    </Link>
                  </Card>
                </Grid>
              ))}
            </Grid>
        </main>
      </div>
    </motion.div>
  );
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const response = await fetch(
    "http://localhost:4001/blankets/"
  );
  const blankets = await response.json();
  return {
    props: { blankets },
  };
};

Run Code Online (Sandbox Code Playgroud)

产品页面

type ProductDetailsProps = Blanket;

export default function ProductDetails({ name, description, imageUrl, size, price }: ProductDetailsProps) {

  let images = [];
  imageUrl.url.forEach((img) => {
    images.push({
      original: img,
      thumbnail: img,
    });
  });

  return (
    <motion.div
      exit={{ opacity: 0 }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6}>
            <ImageGallery items={images} />
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper elevation={0}>
              <Card>
                <CardContent>
                  <Typography variant="h4" gutterBottom>
                    {name}
                  </Typography>
                  <Typography variant="subtitle1">
                    Price: {price.small}
                  </Typography>
                  <Typography variant="body1" gutterBottom>
                    {description}
                  </Typography>
                </CardContent>
              </Card>
            </Paper>
          </Grid>
        </Grid>
    </motion.div>
  );
}

export const getStaticProps: GetStaticProps = async (context) => {
  const id = context.params.id;
  const response = await fetch(
    `http://localhost:4001/blankets/${id}`
  );
  const blanket = await response.json();

  return {
    props: blanket,
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await fetch(
    "http://localhost:4001/blankets/"
  );
  const blankets: Blanket[] = await response.json();
  const paths = blankets.map((blanket) => {
    return { params: { id: blanket.id.toString() } };
  });

  return {
    paths,
    fallback: false,
  };
};

Run Code Online (Sandbox Code Playgroud)

任何帮助都非常受欢迎！

Answer 1

dan*_*aba 8

仔细阅读文档后我发现

在开发中（下一个开发），每个请求都会调用 getStaticPaths。

归档时间：	5 年，4 月前
查看次数：	3813 次
最近记录：	3 年，1 月前