[next.js] getServerSideProps, getStaticProps, getStaticPaths

pages 폴더에서만 써야하는 함수로 getServerSideProps, getStaticProps가 있다.

 

차이점은 크게 ssg냐 ssr이냐로 볼 수 있는데,

getStaticProps = SSG(Server Side Generate)

getServerSideProps = SSR(Server Side Rendering)

이건 뭐야? 할 것이다.

getStaticProps은 getServerSideProps보다 빠르다.

그 이유는 매번 새로 만들지 않아서다.

서버에서 정적인 데이터를 보여줄때 사용된다.

 

동적인 데이터가 있다면 요청에 따라서 계속 변해야한다면, getServerSideProps 써야만한다.

 

둘다 솔직히 미리 데이터를 보여줘야하는 부분이 없다면 CLIENT 단에서 작동되는 것이 제일 좋다.

그러나 SSR이나 SSG가 사용되는 이유로는 미리 렌더링되어야 하는부분 때문에 그러하다.

 

getStaticPaths은 무엇인가?

기존 리액트는 useRouter를 통한 get값이나 post값을 접근했다.

하지만, 이는 컴포넌트에서만 작동되니 getStaticProps, getServerSideProps에서 접근이 불가능하다.

next.js에서 쓸 get이든 post이든 id값을 가져와야하는 것이 필요하다.

이때 사용되는 것이 getStaticPaths이다. 여기서 값을 미리 집어 넣으면, 해당 값을 통해서 매개변수값을 가져와 서버에서 해당 값을 가져올 때 사용된다.

id값을 사용하는 것으로 보면 된다.

여기서 추가로 fallback이라는 객체값을 false로 두면 해당 getStaticPaths에 없는 값이 들어올 경우 404를 자동으로 뱉는다.

 

공통적으로

서버에서 페이지 창이 최초 빌드때 작동된다.

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/getstaticprops%EC%99%80-getserversideprops-in-next-js-ab076c253d2c

getStaticProps와 getServerSideProps in next.js

https://nextjs.org/docs/getting-started

Getting Started | Next.js