search.js파일을 보면
검색어가 쿼리 스트링으로 되어있어서
이것을 기준으로 검색된 상품 목록을 가져오게 된다.이 페이지를 정적생성으로 만든다고 하자.
getStaticProps함수를 만들고 관련된 코드를 전부 옮긴다.
리액트 훅은 다 지운다.products라는 데이터를 가지고와서
prop으로 내려준다.
하지만 useRouter 훅을 사용할 수 없다.
어딘가에서 쿼리 스트링값을 가지고와야하는데정적생성은 빌드할 때 파일을 미리 만들어놓는 것인데
어떤 쿼리가 들어올지 알수가없다.즉, Next.js 서버로 리퀘스트가 오는 시점에만 알 수 있다.
그래서 이런 경우에는 정적생성이 불가하다
대신에 서버사이드렌더링을 해야한다.
프리렌더링은 웹브라우저 로딩 전에 렌더링하는 것이고
그 중에서도 정적 생성은 빌드하는 시점에 렌더링하는 것이다.서버 사이드 렌더링은 웹 브라우저가 리퀘스트를 보낼 때마다
그때 그때 렌더링해서 보내주는 것이다.Next.js서버로 리퀘스트가 도착하면
그 리퀘스트에 있는 쿼리 스트링값을 가지고와서 렌더링하면된다.
하는 방법은 정적생성과 비슷한데 함수 이름이 다르다.
getServerSideProps이다.그리고 context라는 객체를 파라미터로 받아서
이 객체의 쿼리값을 사용하면된다.이 q값을 props로 내려주고 화면을 보여주는 데 사용한다.
들어오는 리퀘스트에 따라서 다르게 프리렌더링하고 싶거나
자주 바뀌는 데이터를 프리렌더링하고 싶을 때 사용
getServerSideProps라는 함수를 만들어서 사용했다.
주의!)
정적생성과 서버사이드렌더링은 같이 사용할 수 없다.
getStaticPaths와 getStaticProps함수는 SSR과 같이 사용할 수 없다.
