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

1 vote193 views1 answer
Vue router mode history typescript
TypeScript
11 votes175 views2 answers
Tonumber typescript / Number typescript
TypeScript
39 votes178 views6 answers
Cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
TypeScript
0 vote178 views1 answer
How to add comments to my blog template wordpress
TypeScript
1 vote169 views1 answer
Adonis preload recursive
TypeScript
0 vote161 views1 answer
Can blue jays tickets still be printed
TypeScript
1 vote177 views1 answer
Serenity.is LinkingSetRelation add column-picker-button
TypeScript
2 votes186 views1 answer
Eslint prettier typescript
TypeScript
0 vote167 views1 answer
Aruments in C#
TypeScript
0 vote127 views3 answers
Inline scripts encapsulated in <script> tags
TypeScript