CODEWITHSUNDEEP
javascriptreactjsnext.js
S.M_Emamian
S.M_Emamian

Reputation: 17383

How to call client-server side render and static generation render

I want to make static generation for top products with getStaticProps. now a section of my rendering is not needed to static generation. for example: comments, related products.

full code:

export default function Gift(props) {

  let [relatedProducts, setRelatedProducts] = useState([]);

  const getRelatedProducts = () => {
    api.get(`gift/id/${props.id}/relateds/count/10`).then(res => {
      console.log(res.data.data);
      setRelatedProducts(res.data.data)
    })
  }

  //called n times. looping !!!
  getRelatedProducts();

  return (

      <GiftProvider value={props}>
        <ProductPage/>


        <RelatedProducts title="related products" products={relatedProducts}/>

        <ProductGeneralProperties/>

        <ProductComment/>

      </GiftProvider>
   
  );
}


export async function getStaticPaths() {

  const gifts = await getTopGifts()
  const paths = gifts.map((gift) => ({
    params: {slug: gift.slug}
  }))

  return {paths, fallback: 'blocking'}
}


export async function getStaticProps(context) {
  const slug = context.params.slug
  const gift = await getGiftWithSlug(slug)
  return {
    props: gift,
  }
}

but with below code my codes renders multi times:

export default function Gift(props) {

  let [relatedProducts, setRelatedProducts] = useState([]);

  const getRelatedProducts = () => {
    api.get(`gift/id/${props.id}/relateds/count/10`).then(res => {
      console.log(res.data.data);
      setRelatedProducts(res.data.data)
    })
  }

  getRelatedProducts();

Upvotes: 0

Views: 76

Answers (1)

Anish Antony
Anish Antony

Reputation: 1525

You can use useEffect hook to call the api

useEffect(() => {
  const getRelatedProducts = () => {
    api.get(`gift/id/${props.id}/relateds/count/10`).then(res => {
      console.log(res.data.data);
      setRelatedProducts(res.data.data)
    })
  }
getRelatedProducts();
},[])

Upvotes: 1

Related Questions