title: NextJS & json-server loading slow on localhost using getStaticPaths
body: <p>I am building tiny e-commerce site and have setup my index page to generate static props as well as my individual product page cause we don't have many products yet. Issue I am experiencing is very slow loading on every single user click as if I missed something crucial in how data fetching works in NextJS.
  So here are snippets below and full project can be found on: <a href="https://github.com/danieltosaba/framer-motion" rel="nofollow noreferrer">https://github.com/danieltosaba/framer-motion</a></p>
  <p><strong>INDEX PAGE</strong></p>
  <pre><code>export default function Home({ blankets }: HomeProps) {
    const classes = useStyles();
    return (
      &lt;motion.div exit={{ opacity: 0 }} initial={{opacity: 0}} animate={{opacity: 1}}&gt;
        &lt;div&gt;
          &lt;Head&gt;
            &lt;title&gt;Framer Motion Transitions&lt;/title&gt;
          &lt;/Head&gt;
          &lt;main&gt;
              &lt;Grid container spacing={2}&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;h1&gt;CHOOSE YOUR BLANKET&lt;/h1&gt;
                &lt;/Grid&gt;
                {blankets.map((blanket) =&gt; (
                  &lt;Grid key={blanket.id} item xs={12} sm={6} lg={4}&gt;
                    &lt;Card&gt;
                      &lt;Link href=&quot;/product/[id]&quot; as={`/product/${blanket.id}`}&gt;
                        &lt;a&gt;
                          &lt;img
                            src={blanket.imageUrl.cover}
                            alt={blanket.name}
                            className={classes.image}
                          /&gt;
                        &lt;/a&gt;
                      &lt;/Link&gt;
                    &lt;/Card&gt;
                  &lt;/Grid&gt;
                ))}
              &lt;/Grid&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/motion.div&gt;
    );
  }
  
  export const getStaticProps: GetStaticProps = async (ctx) =&gt; {
    const response = await fetch(
      &quot;http://localhost:4001/blankets/&quot;
    );
    const blankets = await response.json();
    return {
      props: { blankets },
    };
  };
  </code></pre>
  <p><strong>PRODUCT PAGE</strong></p>
  <pre><code>type ProductDetailsProps = Blanket;
  
  export default function ProductDetails({ name, description, imageUrl, size, price }: ProductDetailsProps) {
  
    let images = [];
    imageUrl.url.forEach((img) =&gt; {
      images.push({
        original: img,
        thumbnail: img,
      });
    });
  
    return (
      &lt;motion.div
        exit={{ opacity: 0 }}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      &gt;
          &lt;Grid container spacing={2}&gt;
            &lt;Grid item xs={12} sm={6}&gt;
              &lt;ImageGallery items={images} /&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} sm={6}&gt;
              &lt;Paper elevation={0}&gt;
                &lt;Card&gt;
                  &lt;CardContent&gt;
                    &lt;Typography variant=&quot;h4&quot; gutterBottom&gt;
                      {name}
                    &lt;/Typography&gt;
                    &lt;Typography variant=&quot;subtitle1&quot;&gt;
                      Price: {price.small}
                    &lt;/Typography&gt;
                    &lt;Typography variant=&quot;body1&quot; gutterBottom&gt;
                      {description}
                    &lt;/Typography&gt;
                  &lt;/CardContent&gt;
                &lt;/Card&gt;
              &lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/motion.div&gt;
    );
  }
  
  export const getStaticProps: GetStaticProps = async (context) =&gt; {
    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 () =&gt; {
    const response = await fetch(
      &quot;http://localhost:4001/blankets/&quot;
    );
    const blankets: Blanket[] = await response.json();
    const paths = blankets.map((blanket) =&gt; {
      return { params: { id: blanket.id.toString() } };
    });
  
    return {
      paths,
      fallback: false,
    };
  };
  </code></pre>
  <p>Any help is more than welcomed!!</p>