Data Fetching

어렵게 생각할 것 없이 말 그대로 데이터를 가져오는 작업이다. 

실무에서도 많이 쓰이는 단어이니 익숙해지도록 하자!

 

화면에 무언가를 그리려면 결국에는 그 무언가를 표현할 수 있는 데이터가 있어야한다. 

Next.js가 제시하는 Data Fecting 은 총 4가지 방법이 있다 

 

SSR / CSR / SSG / ISR 

 

SSR

SSR(Sever Side Render)은 그림을 그리는 대상이 'Server' 이다.  

읭 이상하다.   갑자기 서버가 왜 나오는 거지?

예전에 '서버'라고 하면 정말 순수 BE 서버를 의미했지만 요즘은 다르다. 

SSR에서 말하는 서버는 프론트단에서 컨트롤하는 서버로 API를 통해 직접 데이터에 접근하는 백앤드 서버를 의미하는 것이 아니다. 

사용자에게 보여줄 데이터를 미리 이 서버로 가져와 페이지를 랜더링한 후 클라이언트에게 전달해주는 방식이라고 이해하면 좋다. 

 

 

NextJS에서 SSR을 담당하는 함수는 getServerSideProps()으로, 이 함수를 통해서 데이터를 패칭 후 데이터를 출력하면 

브라우저에서  출력되는 것이 아니라, 터미널에서 출력되는 것을 확인할 수 있다. 

 

저 함수친구가 '백엔드의 서버'에서 데이터를 받아와서 컴포넌트(페이지)에게 props로 전달해준다 :)

 

CSR

CSR(Client Side Render) 은 SSR과 정반대되는 개념이다. 

클라이언트(사용자가 지금 접속해 있는 브라우저)가 API를 통해 직접 데이터를 가져와서 화면에 랜더링을 하는 방식이다. 

NextJS에서 CSR을 담당하는 함수는 따로 없기 때문에,  getServerSideProps()를 사용하지 않는다면 기존 React와 동일하게 사용하면 된다. 

CSR

프론트 서버로 부터는 브라우저에서 동작할 UX/UI 인터랙션을 운영하는 SPA React 파일,   

백앤드 서버로 부터는 실제로 API에서 동작하게 될 데이터 파일
이렇게 각각의 서버로 부터 파일을 받아서 결론적으로는 브라우저가 조합해서 화면을 그려나가는 형식이라고 보면 된다 :-)

SSG

 SSG(Static-Site Ceneration)는 데이터를 미리 가져와서 빌드하는 시점에  패칭, 정적인 페이지를 만든다  

SSG

 

SSR과 SSG가 얼핏 보기에는 비슷하게 보인다.  그러면 이 두 방식의 차이점은 뭘까?

바로 데이터를 패칭하는 시점이 다르다.  SSR은 클라이언트 요청이 있을 경우에 매번 서버로 부터 데이터를 받아와 

실시간으로 서버에서 랜더링을 하고 클라이언트에게 전달해주는 동적인 페이지를 구현할 때 사용하고 , 

SSG는 빌드 시점에 데이터를 한번 패칭한 다음에 클라이언트에서 페이지 랜더를 요청하면 '빌드 시점에 패칭한 데이터'로 불러들인다. 

따라서 화면을 랜더링할 때 동적으로 데이터를 받아올 필요가 없는, 정적페이지를 구성할 때 사용하기 좋은 방법이다.  

프로그램의 최적화를 위해서 페이지를 SSR로 구성할지, SSG로 구성할지 설계시점에 고민을 많이 해야지

SSR은 랜더링을 할 때 실시간으로 데이터가 바로바로 변화되고 변경된 데이터가 반영이 되어야할 때 구성하면 된다. 

모든 페이지에 SSR을 적용하면 접근 할 때마다 데이터가 패칭이 되고, 사용자가 많을 경우에는 서버에 과부화가 올 수 있기 때문에 

위와 같은 상황이 아니라면 SSG를 통해 정적인 페이지를 미리 구상해 놓는 것이 좋다. 

 

SSG를 확인하려면 꼭 빌드를 해야한다. (빌드 시점에 패칭된  페이지를 가져오는 것이니까 :) )

사용법은 getServerSideProps() 대신에  getStaticProps() 함수로 사용해주는 것이 끝 

getStaticPaths()와 함께 사용하게 되는데, 미리 만들어 놓은 정적 페이지의 Path를 지정하는 함수이다. 

 

ISR

ISR(incremental Static Regeneration)은  특정 주기를 정해서 데이터를 가져와 서버에서 미리 랜더링해놓는 정적 페이지에 다시 데이터를 패칭하는 방법이다.  SSG가 빌드 시점에 패칭된 데이터이다보니 상대적으로 데이터의 신뢰도가 낮을 수 있는데, 그런 단점을 보완하는 친구라고 이해하면 좋다. 

ISR을 담당하는 친구는 getStaticProps() 와  revalidate를 함께 사용한다. 

그럼 ISR과 SSR의 다른점은 뭔데? 결국 데이터를 가져와서 다시 페이지를 만든다는 것은 동일한거 아닌가? 

SSR은 클라이언트가 요청할 때마다 API에 접근해 데이터를 바로바로 받아오지만, ISR은 revalidate로 지정한 시간 텀을 주고 데이터를 업데이트 하기 때문에 상대적으로 SSR보다는 데이터 요청이 적을 수 있다. 

SSR과 SSG 두가지 특징이 모두 필요한 페이지라면 ISR을 활용해보는 것도 좋겠다 :)