원티드 프리온보딩 챌린지 10월 (CSR / SSR with Next.js)

사전과제

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

CSR이란 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다는 것이다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.

장점

• 후속 렌더링 속도가 빠르다. (UX가 좋음)
• 서버 부담이 준다.
• ttv === tti (보이는 순간과 클릭가능한 시간이 동일, UX와 관련?)

단점

• SEO문제 발생. (빈 html을 처음에 받기 때문, 구글엔진은 js까지 크롤링?)
• 초기 로딩 시간이 느리다. (chunk?)

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

SPA는 주로 CSR을 이용한다.(SPA!==CSR)
CSR에는 위와 같은 단점이 존재한다.

각각의 장단점 중 장점들만 부각시키기 위해서 우리는 각각 필요한 곳에 SSR과 CSR을 적용시킬 필요가 있다.

구체적으로...

• 네트워크가 느릴 때
  (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
• SEO가 필요할 때
• 최초 로딩이 빨라야할 때
• 웹 사이트가 상호작용이 별로 없을 때

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

Next.js 세팅 가이드
Next.js Github 레포지토리

// package.json

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

Next.js 세팅이후 yarn start 스크립티를 실행한다면
"next start"라는 cli 명령이 시행된다.

nextjs github 레포에서 관련 파일을 찾아보았다.
해당 파일 주소

// next.js/packages/next/cli/next-start.ts

#!/usr/bin/env node

// 생략..

const nextStart: cliCommand = (argv) => {

// 옵션 핸들링 및 에러 핸들링

  const validArgs: arg.Spec = {
    // Types
    '--help': Boolean,
    '--port': Number,
    '--hostname': String,
    '--keepAliveTimeout': Number,

    // Aliases
    '-h': '--help',
    '-p': '--port',
    '-H': '--hostname',
  }
  let args: arg.Result<arg.Spec>
  try {
    args = arg(validArgs, { argv })
  } catch (error) {
    if (isError(error) && error.code === 'ARG_UNKNOWN_OPTION') {
      return printAndExit(error.message, 1)
    }
    throw error
  }
  if (args['--help']) {
    // 생략..
  }

// dir, host, port 지정

  const dir = getProjectDir(args._[0])
  const host = args['--hostname'] || '0.0.0.0'
  const port = getPort(args)

// keepAliveTimeout 관련 옵션 지정

  const keepAliveTimeoutArg: number | undefined = args['--keepAliveTimeout']
  if (
    // 생략..
  ) {
    // 생략..
  }

  const keepAliveTimeout = keepAliveTimeoutArg
    ? Math.ceil(keepAliveTimeoutArg)
    : undefined

// 서버 실행

  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)
    })
}

export { nextStart }

주석으로 간단히 설명 및 유추 해보았다.

💟 참고자료
https://hahahoho5915.tistory.com/52
https://velog.io/@namezin/CSR-SSR
https://proglish.tistory.com/216