[NextJs] getStaticProps와 getServerSideProps

getStaticProps

If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
→ page에서 getStaticProps(SSG)를 통해 함수를 export 하면, Next.js는 getStaticProps를 통해 return된 props를 사용하여 해당 page를 build time에 pre-render 할 것이다.

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

- build 시 data를 fetch 한다. 따라서 빌드 시 고정되는 값으로 빌드 이후에는 수정이 불가능 하다.

- data가 수정되지 않으므로 SSG에 유용하다.

  →  즉, 수정되지 않는 데이터를 fetch하는데 많이 사용

예시 

interface UserInterface {
  userId: number
  name : string
  email : string
  age: number
}
interface aboutProps{
  userInfo : UserInterface;
}

//getStaticProps()에서 받은 데이터값을 props로 받음
function About({ userInfo } : aboutProps) {
  return (
    <div id={user.userId}>
      <p> name : {userInfo.name} </p>
      <p> email : {userInfo.email} </p>
      <p> age : {userInfo.age} </p>
    </div>
  )
}

export async function getStaticProps(context) {
  const userInfo = await(await fetch('https://.../user')).json();
  
  // 데이터가 없으면 notFound를 보낸다 
  if (!userInfo) {
    return { notFound: true, }
  }
  //빌드타임에 받아서 About component로 보낸다
  return {
    props: {
      userInfo,
    },
  }
}
export default About;

 

getServerSideProps

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
→ page에서 getServerSideProps(SSR)를 통해 함수를 export 하면, Next.js는 getServerSideProps를 통해 return된 data를 사용하여 요청 시마다 해당 page를 pre-render 할 것이다.
 
https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

- 빌드와 상관없이 페이지를 요청 할 때마다 데이터를 가져온다.

- 요청 시 데이터를 가져와야 하는 페이지를 미리 렌더링해야 하는 경우(SSR)에 사용한다.

- CDN에 캐싱되지 않아 느리기 때문에 데이터의 update가 빈번하거나 SEO가 굳이 필요하지 않은 데이터(ex.user data)라면 사용을 삼가는 것을 권장한다. (cache-control header가 구성된 경우에는 캐싱될 수 있다.)

예시

interface postInterface {
  id: number
  title : string
  content : string
}
interface detailProps{
  posts : postInterface[];
}

//getStaticProps()에서 받은 데이터값을 props로 받음
function Detail({ posts } : detailProps) {
  return (
    <div>
      {posts&&posts.length>0 ? (
        posts.map((post, i) => {
          return (
            <div id={post.id}>
              <h1>{post.title}</h1>
              <p>{post.content}</p>
            </div>
          );
        })
      ) : (
        <p>there's no data</p>
      )}
    </div>
  )
}

export async function getServerSideProps(context) {
  const posts = await(await fetch('https://.../posts')).json();

  return { 
    props: { 
      posts 
    } 
  }
}
export default Detail;