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

0 vote171 views1 answer
Disable pdf download button in iframe in angular 10
TypeScript
14 votes181 views6 answers
How to install bootstrap in angular 11
TypeScript
-1 vote164 views1 answer
Directions api remove points bubble
TypeScript
0 vote198 views1 answer
Typescript intellisense not working vscode
TypeScript
0 vote178 views1 answer
Is there a way to show a preview of a RecyclerView's contents as Grid in the Android Studio editor?
TypeScript
4 votes181 views3 answers
Show timestamp as yyyy mm dd html angular
TypeScript
0 vote211 views1 answer
Adding html in typescript
TypeScript
1 vote213 views1 answer
Typescript override interface property
TypeScript
0 vote176 views1 answer
Apply function to all elements with a class name
TypeScript
29 votes247 views4 answers
File ng.ps1 cannot be loaded because running scripts is disabled on this system.
TypeScript