Server Side Rendering

Next.JS는 app을 pre-render한다 그리고나서 초기화면으로 html을 준다. 그렇기 때문에 페이지를 inspect하게 되면 입력했던 Loading... 값이 있을 것이다.

값을 확인 할수 가 있다.

개발자의 기호에 따라 이 Loading 상태를 보고 싶지 않을수 가 있지 않은가
즉 server에서 일어나는 data관련된 작업을 모두 한 다음 그 때 페이지를 렌더하고 싶은 경우도 있을 것 이다. 바로 Server Side Rendering을 하는 것이다

그럼 어떻게 Server Side Rendering을 할까

getServerSideProps함수를 사용하면 된다.

page에서 서버 측 랜더링 함수인 getServerSideProps함수를 export하는 경우 Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 request에서 이 페이지를 pre-render합니다. getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않습니다. 설정후에 html source를 확인해보면

보게 되면 이제는 react component의 result값 getServerSideProps를 통해 props 값으로 리턴해주는 result값이 전부 들어와 있는 것을 확인해볼 수 있다. 이제는 Loading...이라는 코드를 따로 구성할 필요가 없어 졌다. 하지만 이렇게 되면 API 구성이 완료 되기 전까지는 화면에 아무것도 보이지 않는 단점도 있다. 어떻게 구성을 할지 기획에 마 맞게 설정하면 될 것 같다.