Breaking News: Grepper is joining You.com. Read the official announcement!

getserversideprops vs getstaticprops

Add Answer

Shirshak Kandel answered on February 9, 2022 Popularity 9/10 Helpfulness 4/10

answer getserversideprops vs getstaticprops

related GetServerSideProps

related getserversideprops

getserversideprops vs getstaticprops

Comment

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.

Popularity 9/10 Helpfulness 4/10 Language typescript

Source: Grepper

Tags: getstaticprops typescript

Link to this answer
Share Copy Link

Contributed on Feb 09 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

GetServerSideProps

Comment

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps: GetServerSideProps<{
  repo: Repo
}> = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return repo.stargazers_count
}

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Nov 27 2023

BUSAYO AYODEJI

0 Answers Avg Quality 2/10

getserversideprops

Comment

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,
  }
}

Popularity 10/10 Helpfulness 2/10 Language typescript

Source: Grepper

Tags: typescript t

Link to this answer
Share Copy Link

Contributed on Feb 10 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

getserversideprops vs getstaticprops

Contents

More Related Answers

getserversideprops vs getstaticprops

Closely Related Answers

GetServerSideProps

getserversideprops

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.