CSR / SSR with Next.js

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.

CSR에 관해 이야기 하기 전에 먼저 SPA를 먼저 알 필요가 있다.

SPA 란 ?

SPA란 Single Page Application 으로 최초 한 번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용하는 단일 페이지로 구성된 웹 애플리케이션이다. SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버 측에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다

CSR이란 ?

CSR이란 말 그대로 클라이언트 측에서 렌더링이 진행된다는 뜻이다. CSR은 클라이언트 측에서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여준다. 그 이후에는 사용자의 요청이 올 때마다, 자원(Resource)을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링 하는 방식이다.
참고로 여기에 Angular JS와 같이 SPA개발에 쉬운 JavaScript 프레임워크 등장했는데, 다시 클라이언트가 무거워지자 다시 View로만 관리하자는 의견에 의해 React JS가 등장하였다.

• 동작과정 : HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content 확인가능

CSR의 장점

• 클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기때문에 SSR 보다 조금 더 빠른 인터랙션이 가능하다.
• page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.
• 서버의 부화를 줄여줄 수 있다.

CSR의 단점

• SEO(검색엔진최적화)가 좋지 않다.

  검색엔진은 index.html을 기준으로 하여 데이터, 태그 등을 통해 적합한 사이트 인지 판단을 한다. 하지만 CSR로 작성된 어플리케이션의 경우에는 html파일이 비어있다. 이 때문에 검색엔진에 걸리지 못한다.

• 초기 구동속도가 느리다.

  SSR은 서버에서 view를 렌더링 한 후 가져오지만 CSR은 HTML 다운, JavaScript 파일, 각 종 자원(Resource)을 다운로드한 후에 브라우저에서 렌더링을 하기 때문에 초기 구동 속도가 느리다.

• 보안 문제가 있다.

  SSR은 사용자 정보를 서버 측에서 세션으로 관리를 하지만, CSR은 쿠키 말고는 사용자 정보를 저장할 공간이 마땅치 않다.

2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

위에서 말했듯이 CSR을 통한 SPA에는 초기 구동속도가 느리고 SEO가 좋지 않다고 했다. 이에 SSR을 적용하게 되면 초기 로딩 속도를 개선하여 UX를 향상시킬 수 있다. 이 뿐만 아니라 규모가 커질수록 초기 로딩속도가 느리다는 단점을 SSR을 적용시킴으로써 보완할 수 있다.

3. Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
https://github.com/vercel/next.js/ (Next.js Github 레포지토리)