프리온보딩 챌린지 - CSR / SSR with Next.js

CSR: Client-side Rendering

CSR은 모바일 기술이 발전하면서 모바일 환경에 최적화된 서비스가 필요했고, 기존에 사용하던 SSR은 모바일에 적합하지 못했기 때문에 기존과 다른 방식이 필요했다. 그렇게 등장한 것이 바로 SPA이다. SPA는 Single Page Application으로, SSR의 단점을 보완하기 위해 트래픽을 감소시켰고, 사용자에게 최적화된 환경을 제공할 수 있게 되었다. 서버는 JSON 파일을 보낼 뿐이었고, HTML을 그리는 역할은 클라이언트 측에서 Javascript가 한다. 이것이 바로 CSR이다.

즉, 클라이언트 사이드 렌더링은 클라이언트 측에서 최초에 1번 전체 페이지를 로딩하고, 이후에는 사용자의 요청에 따라 서버에서 데이터를 받고 클라이언트가 해석하고 렌더링 하는 방식이다.

CSR의 장점

• 트래픽 감소로 인한 빠른 인터랙션
  SSR은 서버로부터 데이터를 요청하고 응답을 받는 일이 잦았기 때문에 자연스럽게 서버에 부담을 줄 수 밖에 없다. 반면, CSR은 사용자의 요청에 따라 필요한 부분만 읽어들이기 때문에 서버에서 전체 페이지를 다시 읽어 들일 필요가 없고, 따라서 빠른 인터랙션이 가능하다. 당연히 서버의 부담을 줄일 수도 있다.

• 연속적인 웹 사이트 경험
  초기에 전체 페이지를 한 번에 불러오기 때문에 새로고침을 하지 않고 페이지를 연속적으로 사용할 수 있다.

CSR의 단점

• 느린 초기 구동 속도
  CSR은 HTML, Javascript, 각종 데이터를 다운로드한 뒤 브라우저에서 렌더링을 하기 때문에 초기 구동 속도가 느리다.

• 검색 엔진 최적화의 어려움
  CSR 방식의 웹 페이지에서는 View를 생성하기 위해 반드시 Javascript를 실행시켜야 한다. 하지만, 대부분의 웹 크롤러는 Javascript 파일을 실행시키지 못하기 때문에 HTML에서만 콘텐츠를 수집하고, CSR 페이지를 빈 페이지로 인식한다.

SPA에서 SSR를 적용해야 하는 이유

SSR과 CSR 중 어느것이 더 좋은 것이냐, 라고 물었을 때 어느 한 쪽이 더 좋다라고 단언할 수는 없다. 그 만큼 각각의 장단점이 존재하기 때문이다. 그래서 퍼블리싱하려는 웹사이트의 성격에 맞는 적절한 방식을 채택하는 것이 좋다. 그리고 가능하다면 양쪽의 장점만을 적절히 혼합하여 사용하는 것이 가장 좋을 것이다.

대표적으로, SPA에서는 SEO의 최적화가 불리하지만, SSR의 장점 중 하나가 바로 SEO가 좋다는 것이다. 그래서 이런 장점을 적당히 섞어 사용하면서 더 좋은 웹 사이트 개발을 위해 SPA에서 SSR 적용을 고려해야 하는 것이다.

Next.js에서 yarn start를 실행했을 때

next.js/packages/create-next-app/templates/default/pages/_app.js이 실행된다.

여기서 _app.js는 클라이언트에서 띄우길 바라는 전체 컴포넌트로, 최초로 실행되고 내부에 컴포넌트들을 실행한다.

Component와 pageProps를 받는데, 여기서 props로 받은 Component는 요청한 페이지이다. GET 요청을 보냈다면, Component에는 /pages/index.js 파일이 props로 내려온다.
pageProps는 페이지 getInitialProps를 통해 내려 받은 props들을 말한다.