원티드 프리온보딩 챌린지 10월 사전과제

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

1) 정의

CSR이란 Client-side Rendering(클라이언트 측 렌더링)의 약자로, JavaScript를 사용해 브라우저에 직접 페이지를 렌더링하는 방식입니다.
브라우저는 최초 렌더링 때 서버에 요청을 보내 내용이 빈 HTML과 JavaScript 번들을 다운로드하고 JavaScript를 실행해 빈 HTML에 화면을 구성합니다.

2) 장점

• 빠른 렌더링 속도
  초기 로딩 이후에는 페이지를 변경할 때, 서버에 필요한 데이터만 요청해 페이지 전체가 아닌, 변경할 부분만 다시 렌더링하기 때문에 속도가 빠르고 페이지 변경이 매끄럽습니다.
• 적은 서버 부하
  서버에 페이지 구성에 필요한 데이터만 요청하고 렌더링 준비, 데이터 페칭, 라우팅 등 모든 로직이 클라이언트에서 수행되기 때문에 서버 부하가 적습니다.

3) 단점

• 느린 초기 로딩 속도
  JavaScript 번들을 다운로드하고 화면구성에 필요한 데이터를 서버에서 받아 HTML을 구성하기 때문에 초기 로딩 속도가 느립니다(성능 저하). 앱 사이즈가 커질수록 필요한 JavaScript의 양이 증가해 로딩 속도가 더 느려집니다.
• SEO(검색엔진 최적화)에 어려움
  JavaScript를 실행하기 전에 HTML에는 크롤러봇이 크롤링할 내용이 없어 SEO에 어려움이 있습니다.

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

SPA는 기본적으로 렌더링 방식으로 CSR을 사용합니다. CSR은 SEO를 하는 데 어려움이 있고 초기 로딩 성능이 낮다는 단점이 있습니다. 이는 사용자의 유입률을 낮추고 이탈률을 높이는 요인이 될 수 있습니다.
CSR과 반대로 SSR은 서버에서 렌더링 준비가 완료된 HTML을 받아 브라우저에 렌더링하기 때문에 초기 로딩 속도가 빠르고 모든 데이터가 이미 HTML에 포함되어있기 때문에 SEO에 유리합니다. 따라서 SPA에서 초기 로딩에는 SSR 렌더링 방식을 사용하면 CSR의 초기 로딩 속도와 SEO 문제를 개선할 수 있습니다.

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

Next.js 프로젝트에서 yarn start 스크립트를 실행하면 next start 스크립트가 실행되고 next/cli/next-start.ts 코드가 실행됩니다. next-start.ts 코드 전문

next-start.ts 코드는 아래와 같은 작업을 수행합니다.

• 옵션값이 유효한지 확인하고 유효하지 않다면 에러를 발생시키고 종료합니다.
• next build script를 실행해 생성되는 .next 폴더가 없으면 에러를 발생시킵니다.
• 서버를 실행하여 .next 폴더에 생성된 최적화된 코드를 실행합니다.

startServer({
    dir,
    hostname: host,
    port,
    keepAliveTimeout,
  })
    .then(async (app) => {
      const appUrl = `http://${app.hostname}:${app.port}`
      Log.ready(`started server on ${host}:${app.port}, url: ${appUrl}`)
      await app.prepare()
    })
    .catch((err) => {
      console.error(err)
      process.exit(1)
    })
}

참고내용

• Pros and Cons of Client-Side Rendering
• Rendering on the Web