CSR, SSR, Next.js의 start command에 대하여 | 원티드 프리온보딩 챌린지 사전 과제

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

CSR에서 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드한다.

그런 다음 JavaScript를 사용하여 DOM을 업데이트하고 페이지를 렌더링한다.

애플리케이션이 처음 로드될 때 사용자는 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있다.

이는 모든 JavaScript가 다운로드, 구문 분석 및 실행될 때까지 페이지가 완전히 렌더링되지 않기 때문이다.

 

페이지가 처음으로 로드된 후 필요한 데이터만 가져오면 되고, JavaScript는 전체 페이지를 새로 고치지 않고도 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 더 빠르다.

 

다만 SEO에 영향을 미칠 수 있다. 일부 검색 엔진 크롤러는 JavaScript를 실행하지 않을 수 있으므로 애플리케이션의 초기 비어 있거나 로드 중인 상태만 볼 수 있다. 또한 전체 페이지를 보려면 모든 JavaScript가 로드되고 실행될 때까지 기다려야 하므로 느린 인터넷 연결 또는 장치를 사용하는 사용자에게는 성능 문제가 발생할 수 있다.

 

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

위 CSR의 단점을 해결하기 위해서는 각 페이지 요구 사항에 따라 SSR를 함께 사용하는 하이브리드 접근 방식이 필요하다.

CSR에서 초기 HTML은 body가 비어있는 상태이므로 SEO 최적화가 어려운데, Next.js를 적용하여 해결할 수 있다.

 

이외에도 클라이언트에게 전달되지 않아도 되거나 보안이 필요한 비즈니스 로직은 SSR에서 처리할 수 있다.

결제나 비밀번호 찾기 서비스 등이 이에 해당한다.

 

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

node_modules > next > package.json 파일에서

next 명령어를 다음 경로에서 실행시킨다는 것을 확인

"bin": {
    "next": "./dist/bin/next"
  },

node_modules > next > dist > bin > next 파일에서

변수로 받는 _command를 lib/commands에서 가져오는 것을 확인

...
const _commands = require("../lib/commands");
...

node_modules > next > dist > lib > commands.js 파일에서

해당 command에 따라 함수를 호출하고 return 시키는 것을 확인

const commands = {
    build: ()=>Promise.resolve(require("../cli/next-build").nextBuild),
    start: ()=>Promise.resolve(require("../cli/next-start").nextStart),
...

위에서 start command 시 호출한 nextStart 함수는

node_modules > next > dist > cli > next-start.js 파일에서 startServer 함수를 호출하는 것을 확인,

 

해당 startServer 함수는 

node_modules > next > dist > server > lib > start-server.js 파일에서

node의 http 함수 등을 사용하여 server.on 해주고 있는 것을 확인

 

Next.js Github Repo에서는 동일 startServer 동작을 아래 경로에서 해주고 있는 것을 확인

https://github.com/vercel/next.js/blob/canary/packages/next/src/server/lib/start-server.ts

GitHub - vercel/next.js: The React Framework

 

Next.js Project에서는 Build 후에 Start를 진행하므로 /dist에서 파일들을 찾을 수 있었으나

Next.js Github Repo에서는 /src의 동일 경로에서 찾을 수 있었다.

 

---

참고자료

Rendering: Client-side Rendering (CSR) | Next.js

 

SSR를 사용해야하는 또다른 이유