Getserversideprops

Next js getserversideprops

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Source: nextjs.org

Getserversideprops

export async function getStaticPaths() {
  const res = await fetch(`${baseUrl}/wp-json/wp/v2/posts`)
  const posts = await res.json()
  //paths is array of objects which is contains one params property with id or slug
  const paths = posts.map(({ slug }) => ({ params: { slug: `${slug}` } }))

  return {
    paths,
    //fallback true mean there is no slug in build time then it will not shown 404 error 
    // and fetch data from server and show it
    fallback: true,
  }
}

Getserversideprops vs getstaticprops

use getServersideProps when data will change after time like wordpress post
which will be changing when new we add new post.
Use getStaticProps when it is static content using it make it cache in.nextjs
so it will load fast.
//Note if you use getStaticProps in dynamic content section then content which 
//is added after deployment will not shown cause it also shown content from cache.

Similar codes

152 votes536 views6 answers
Create react app ts
TypeScript
0 vote307 views1 answer
How to get label for points from a column in dataframe for scatter plot in python
TypeScript
0 vote325 views1 answer
Python check if property exists in dictionary
TypeScript
31 votes305 views1 answer
Microsoft execution policies
TypeScript
0 vote330 views1 answer
How to align text inside an li to its center
TypeScript
0 vote321 views1 answer
Algorithm that prints if one of the numbers is multiple of the other
TypeScript
4 votes313 views2 answers
Push in typescript
TypeScript
0 vote313 views1 answer
Combine 2 lists to dataframe python
TypeScript
0 vote301 views2 answers
Accept the SDK license agreements and install the missing components using the Android Studio SDK Manager
TypeScript
0 vote291 views1 answer
Mat-checkbox change
TypeScript