문제
노션 API를 사용해 s3에 있는 이미지를 호출하는 페이지가 있다
이미지url에는 expired_date(만료기한)이 있었고 빌드 다음날 부터 이미지가 x box현상이 있었다
초기 API호출을 한번 하여 이미지 url 을 만들어 놓고 더이상 호출하지 않아서 발생했던 문제
getStaticProps vs getServerSideProps
왼쪽의 getStaticProps를 사용했을때 더이상 api를 호출하지 않았는데
개발모드로 할 당시에는 계속 호출을 하고 있었다
배포시에 단 한번만 호출을 하고 html 또는 json으로 데이터를 정적으로 보관하고 더이상 api를 호출하지 않아서 데이터를 빠르게 가져오고 리소스를 아낄수있게해준다
나와 같은 경우는 API를 계속 호출해야 하기에 오른쪽의 getServerSideProps로 변경시 문제는 해결
페이지가 요청될때마다 API를 호출하게 될 것
getStaticPaths
getStaticProps와 짝궁으로 쓸수있는 메소드도 정리해야겠다
next.js는 동적 url로 변수를 받아서 경로로 만들수 있는데
/notion/[page_id].js
export async function getStaticPaths() { // 나중에 정리하기 }
정리
Static Geeration
- 빌드시 한번 호출 후 해당 페이지를 html로 만들어 놓는다
- 그래서 속도가 매우 빠름 ( 또 호출하고 파싱하고 하는 작업을 하지 않아도 되니까)
- method
- getStaticProps
- getStaticPaths
Server-Side Rendering
- 페이지 요청시마다
- Static 보다는 느리지만 데이터변경이 계속 일어나야 하는 경우 적합함
- 어느 정도는 Static하게 변경해보는 방법 찾아보기
- 위와 같은경우는 날짜로 동적url만들어서 그날만 한번 호출하게 끔?
- getStaticProps 와 같이 사용해서 ?? 방법이 있을듯.. 찾아보자
- Method
- getServersideProps
getInitialProps (next.js에서 권장하지 않음 나중에 알아볼것)