[wanted] #0 CSR / SSR with Next.js 사전 과제

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

SPA(Single Page Application)란 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이며, MPA(Multiple Page Application)란 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다

 

CSR(Client-side Rendering)이란 브라우저가 서버에 HTML과 JS 파일을 요청하고 최초 로딩 이후, 사용자의 상호작용에 따라 JS를 이용해 화면을 동적으로 그리는 방식이며, SSR(Server-side Rendering)이란 브라우저가 페이지를 요청할 때마다 서버에서 그려진 화면을 새로 받아오는 방식이다

 

Client-side Rendering

Server-side Rendering

CSR의 장단점은 다음과 같다

 

장점

• 사용자 경험(UX): 필요한 부분만 동적으로 바뀌기 때문에 더 빠르고, 페이지마다 새로고침이 발생하지 않아 사용자 경험(UX) 측면에서 좋다
• 서버 부하 감소: 동일한 에셋을 페이지 로드마다 다시 다운로드 받지 않고 필요한 데이터만 가져오므로, HTTP 요청 횟수 및 서버 부하가 줄어든다

 

단점

• 검색 엔진 최적화(SEO): JS 파일을 실행하지 않는 검색 엔진 봇이 콘텐츠 정보를 크롤링할 수 없어 검색 엔진 최적화(SEO)에 불리하다
• 느린 초기 구동 속도: 초기 페이지에 모든 에셋과 JS 파일이 받아질 때까지 기다려야 한다

 

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

전통적인 방식으로 생각한다면 SPA가 사용하는 렌더링 방식이 CSR이고, MPA가 사용하는 렌더링 방식이 SSR이지만, SPA에서도 SSR을 적절히 구현한다면 CSR의 단점들을 보완할 수 있다!

 

React를 예시로 들자면, Create React App 등으로 생성한 CSR 프로젝트는 첫 화면을 불러올 때 JS 코드를 실행하는 동안 약간의 딜레이가 생기는데, Next.js를 활용한 SSR 프로젝트의 경우 유저가 매우 느린 네트워크 환경을 사용해도 서버에서 미리 생성된 HTML 코드를 바로 보여준다. (= Static Pre Rendering) 이후 React가 실행되며 HTML이 React 컴포넌트가 된다. (= Hydration) 이 경우 검색엔진에서 파악하기 용이해 검색 엔진 최적화(SEO)에도 유리하다

 

다만 모든 서비스에 SSR을 도입하는 것이 정답은 아니다. 서비스가 사용자 개인의 데이터 위주일 경우 SSR의 장점을 온전히 활용하기 어렵고, 페이지마다 로드 속도가 더 느려질 수 있기 때문이다. 서비스/프로젝트/콘텐츠의 성격에 따라 SSR 도입 여부를 판단하도록 하자

 

Server-side Rendering

1. 상위 노출이 필요하거나
2. 누구에게나 동일한 내용을 노출하거나
3. 페이지마다 데이터가 자주 바뀌는 경우

Client-side Rendering

1. 개인정보 데이터를 기준으로 구성되거나
2. 보다 나은 사용자 경험을 제공하고 싶거나
3. 상위노출보다 데이터 보호가 더 중요한 경우

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

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

일반적인 경우 start 스크립트는 next start를 실행하며, 이는 next build 스크립트로 .next 폴더에 컴파일된 애플리케이션을 프로덕션 모드로 로컬에 실행하는 명령어이다

 

1. yarn start 스크립트를 실행하면 next 패키지의 cli 함수가 실행된다

GitHub - vercel/next.js: The React Framework

2. nextStart 함수는 host와 port 등을 파라미터로 받는 startServer 함수를 호출한다

GitHub - vercel/next.js: The React Framework

3. startServer 함수는 next의 app 인스턴스를 생성하고 서버를 실행시킨다

 

Reference🔽

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

GitHub - vercel/next.js: The React Framework