18.06.11. React - Next.JS 로 SSR 환경 꾸미기.

리액트를 사용하면서, SSR 을 구현하려고 했다.

기존에 회사 서버가 PHP 로 구성되어있기 때문에, 일단 라우팅과 SSR 은, PHP 에서 담당하고, 리액트는 뷰만 만들어서 쓰기로 했다. 그러다보니, 테스트환경에 문제가 있었다. 나중에 Node 로 넘어가면서 눈여겨보고 있던 Next.js 를 사용하려고 했는데, 그러다 보니, 테스트환경이 매우 복잡해 지고 있었다. 

그래서, PHP 서버는 API 서버로만 남겨놓기로 하고, 처음부터 Next.js 와 함께 Node 로 넘어가야겠다는 결심을 했다.

그래서 Next.js 의 공홈에서 제공하는 Learning 을 처음부터 살펴보았다.

https://nextjs.org/learn/

살펴본 결과.

매우 훌륭하다.

똑같이 getInitialProps 를 이용하는데, 처음에 브라우저에 호출을 할때는 알아서 서버사이드에서 데이터를 불러다가 초기 렌더링을 해준다. 그리고나서, 앱 내부에서 이동하는데, 서버를 거치지 않은 채 앱 내부 라우팅을 이용해 페이지가 이동되면서, 클라이언트 사이드에서 getInitialProps 가 호출되고, 초기 데이터를 만들어서 뷰를 뿌려준다.

이런 훌륭한!!!!!!!

사실 서버 사이드렌더링과, 클라이언트 사이드 렌더링의 장단점은 너무나도 확실했었다.

SSR 장점 -> SEO에 필수.

SSR 단점 -> 페이지 요청마다 서버자원을 이용해서 렌더링. (서버 성능 중요)

CSR 장점 -> API 서버만 분리 이용. 렌더링을 브라우저에서 담당.

CSR 단점 -> SEO 최악, 맨 처음  렌더링 깜빡임 현상(js 다운로드시점)

이런 명확한 차이가 있었는데,

Next 를 이용해서,

맨 처음 페이지 요청을 할 때는 서버사이드로 렌더링이 되고, 그 이후에 내부에서 페이지가 이동될때는 데이터 가져오는 API 만 호출하면서, 브라우저에서 렌더링을 하는것이다.

이렇게 함으로써, SSR, CSR 의 장점을 모두 가져오게 되는 것이다. 

매우 훌륭하다. 매우 만족스럽다.

Angular 에다가, PHP 에서 SSR 을 해보겠다고 난리를 개고생을 했던 지난 시간이 매우 허망하다.

이제 Node 로 넘어가면, 다시는 PHP로 넘어오지 않을것 같다.