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

2 votes318 views1 answer
.mat-dialog-container
TypeScript
-1 vote319 views1 answer
React react-dom react-scripts cra-template has failed.
TypeScript
1 vote304 views1 answer
Node js process on unhandled promise rejection
TypeScript
1 vote309 views2 answers
Mongodb update all items in array
TypeScript
0 vote316 views1 answer
Typeerror: cannot read property 'initialize' of undefined passport
TypeScript
0 vote356 views1 answer
Les différents types de cours
TypeScript
2 votes350 views1 answer
State in react typescript
TypeScript
-1 vote360 views3 answers
Connect redis typescript usage
TypeScript
2 votes308 views1 answer
Prettier not working with tsx
TypeScript
0 vote337 views1 answer
Flutter fab covers widget on keyboard open
TypeScript