1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
( CSR 개념 & 장점 )
-
클라이언트 측에서 렌더링하는 방식을 말한다.
- 클라이언트 측에서 화면을 구성한다고 생각하면 이해가 쉽다.
- So, "장점" 서버에 부하가 적다.
-
클라이언트에게 필요한 페이지만 그린다.
- So, "장점" 페이지 변경시 화면이 그려지는 속도가 빠르다.
( CSR 개념 & 단점 )
-
CSR일 경우 클라이언트 측에서 최초로 불러온 HTML은 빈 뼈대이다.
- So, "단점" SEO ( 검색 최적화 ) 에 불리하다. < 웹크롤러가 읽지 못 함. but 구글 검색엔진은 JS를 읽는다고 한다. 그래도 완벽하지 않다고 한다. >
-
초기에 데이터를 제외한 모든 파일을 클라이언트 측에서 다운로드를 한다.
- So, "단점" 클라이언트가 화면을 처음 들어갔을 때 화면이 로딩되는 속도가 SSR에 비해 늦다.
2. SPA로 구성된 웹 앱에서 SSR이 필요한 이유에 대하여 설명해주세요.
( SSR 필요한 이유 )
-
일반 SPA는 리액트, 뷰 기반 CSR로 만들어지는데 이 경우 SPA가 SSR의 필요한 장점을 챙길 수 없다.
- 여기서 SPA 웹 앱에서 필요한 SSR의 장점이란 여러가지가 있겠지만, 대표적으로 "SEO 최적화", "초기 로딩 속도 빠름"이 있다.
( SSR의 장점 )
-
SSR은 서버에서 필요한 데이터를 모두 가져와 HTML 만들어 조금의 동적 소스를 더해 브라우저에 넘겨준다.
-
So, 웹크롤러 입장에서 HTML은 빈 뼈대가 아니므로 SEO ( 검색 최적화 )에 유리하다.
-
So, 서버에서 렌더링 관련 일을 한 후 브라우저에 넘겨주기에 클라이언트 측에서 빠르게 화면을 볼 수 있다.
-
3. Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
( 스크립트의 start )
-
"start": "next start",
-
yarn start를 하여 개발 모드의 server가 아닌 production server의 서버를 연다.
-
Runs next start to start a Next.js production server
-
cording, arsenal, book, color