[원티드:프리온보딩 챌린지 10월(CSR / SSR with Next.js )] 사전과제

• CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
  웹 페이지를 정보를 처리하는데에 있어서 클라이언트의 비중이 큰 것을 의미합니다.
  다시 말하자면, 클라이언트인 브라우저가 렌더링을 처리하는 방식 입니다.
  
  * 장점
        - 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있습니다. (새로고침X)
        - View 렌더링을 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공해 줍니다. 
  
  * 단점
        - 첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 다소 느립니다.
        - 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요합니다.
  
  * 언제 사용할까?
  
  • 네트워크가 빠를 때
  • 서버의 성능이 좋지 않을 때
  • 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
    (로딩창을 띄울 수 있는 장점이 있다.)
  • 메인 스크립트가 가벼울 때
  • SEO 를 배제가능할 때
  • 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때.
    (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)
    
    
    
    
• SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
  웹 페이지를 정보를 처리하는데에 있어서 서버의 비중이 큰 것을 의미합니다.
  다시 말하자면, 클라이언트인 브라우저가 서버에 매번 데이터를 요청할 때 마다 서버에서 처리하는 방식입니다.
  
  * 장점
        - 첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠릅니다.
        - 검색엔진최적화(SEO)에 용이합니다.
  
  * 단점
        - 초기로딩 이후에 페이지 이동시에 다시 속도가 느려집니다.
  
  * 언제 사용할까?
  
  • 네트워크가 느릴 때
    (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
  • SEO(검색 엔진 최적화)가 필요할 때.
  • 최초 로딩이 빨라야하는 사이트를 개발 할 때
  • 웹 사이트가 상호작용이 별로 없을 때.
    
    
    
    
• Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
  
  yarn start시에 pages 안의 _app.js 또는 _app.tsx 가 가장 먼저 실행되며, 페이지 전환시 레이아웃과 상태값을 유지할 수 있습니다. 그래서 global 스타일이나 네비게이션바 와 같은 페이지에서 공통으로 쓰이는 것들을 한번에 적용할 수 있습니다.