getStaticProps || getServerSideProps_TIL

next.js 공부 중에 getStaticProps를 알게되었는데 조금 이해가 더 필요해서 정리하기로 했다.

 

react로 개발을 하면서 data를 가져오게되면 처음에는 undefined가 되고 두번째에 값이 들어오는것을 알 수 있다.

그 이유는 useEffect로 가져오는 data fetch함수가 최초렌더링시에는 실행되지 않고 jsx가 한번 실행되고 나서 함수가 실행된다.

그래서 그 이유로 화면이 깜빡거리거나 값이 없다고 뜬다. 

-> 이러면 사용자의 경험이 안좋아질 수 있다.

 

그래서 이러한 문제를 해결하기 위해서 사전렌더링기능(pre-rendering)을 제공하는 Next.js가 나왔다.

next.js? : 렌더링 이전에 미리 만들어놨다가 렌더링 시 바로 값이 보일 수 있도록 하는 기능을 가진 리액트 프레임 워크다.

 

PreRendering을 제공하는 두가지 방식이 있다.

그게 바로 SSG , SSR 이다.

 

1.Static Site Generation

 

최초 빌드 시에 딱 한번만 호출이 된다. 그래서 최초에 빌드된 값이 계속해서 렌더링 된다.  -> 정적인 페이지

SSR처럼 서버로부터 완성된 html을 받지만 파일 생성 시점이 빌드때다. SSR과의 차이점이다.

즉, npm run build 시 pages에 작성한 파일들이 미리 생성되어 정적문서로 가지고 있다.

그럼 업데이트를 어떻게 하나?

: revalidate로 할 수 있다. ( 10으로 설정해놓으면 10초뒤에 업데이트된 데이터가 렌더링된다)

 

export async function getStaticProps(context) {
  return {
    props: {},  //여기 props가 컴포넌트의 props로 간다.
  }
}

 

 

 

2.Server Side Rendering

: 요청이 들어올때마다 서버에 요청을 하며 그때마다 사전 렌더링을 한다. 동적데이터에 사용하기 더 용이

 다만 서버쪽에서 렌더링을 하는것이므로 parameter로 context를 받아서 req,res변수를 저장해둬야한다.

 

const Lists = [
  {
    id: 1,
    title: "first list",
  },
  {
    id: 2,
    title: "second list",
  },
];

const Component = (props) => {
  return (
    <>
      {props.data.map((data) => (
        <h2 key={data.id}>{data.title}</h2>
      ))}
    </>
  );
};

export async function getServerSideProps(context) {
  const req = context.req;   //이렇게 변수를 지정해줘야한다.
  const res = context.res;

  return {
    props: {
      data: Lists,
    },
  };
}

export default Component;

//다른블로그에서 참고

 

---

상황에 따라서 선택에서 사용하면 된다.

블로그와 같은 항상 같은 내용을 불러와야하는 정적인 성격의 경우 SSG를 사용하면 되고,

그때그때 마다 입력값이 나와야하거나 업데이트내용이 나와야할 경우 SSR을 사용하면 될꺼같다.😎