个人中心
gpt4 book ai didi

javascript - NextJS & json-server 使用 getStaticPaths 在 localhost 上加载缓慢

转载 作者：行者123 更新时间：2023-12-05 00:35:11 26 4
gpt4 key购买 nike

我正在构建小型电子商务网站，并设置了我的索引页面来生成静态 Prop 以及我的个人产品页面，因为我们还没有很多产品。我遇到的问题是每次用户点击时加载速度都很慢，好像我错过了 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 },
  };
};
产品页面 
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,
  };
};
任何帮助都非常受欢迎!!

最佳答案

仔细阅读文档后，我发现

In development (next dev), getStaticPaths will be called on everyrequest.

关于javascript - NextJS & json-server 使用 getStaticPaths 在 localhost 上加载缓慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64332336/

26 4 0
文章推荐： javascript - JSON.stringify() 在值上带有单引号，在键上没有引号
文章推荐： arrays - Fortran 可分配数组和指针之间的等价性
文章推荐： eclipse-rcp - Eclipse RCP 将值保存到工作台
文章推荐： javascript - lodash/fp getOr 的工作原理
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com