원티드 프리온보딩 FE 챌린지 7월 - CSR / SSR with Next.js

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

SSR과 CSR은 웹 페이지 렌더링 방식입니다. 그중 CSR(Client-side Rendering)은 서버에서 받은 HTML과 JS 등을 클라이언트 측에서 웹 콘텐츠를 렌더링 하는 방식입니다.

 

► CSR의 장점

• 페이지 로드가 완료되면 전체 페이지를 다시 로드하지 않고 데이터만 서버에서 가져오기 때문에 후속 상호 작용이 더 빨라집니다.
• UI 구성 요소의 렌더링이 클라이언트 측에서 발생하기 때문에 전체 페이지를 다시 로드하지 않고도 부드러운 전환, 애니메이션 및 동적 업데이트가 가능합니다.

► CSR의 단점

• 서버에서 렌더링 한 페이지를 전단해 주는 SSR과 달리 클라이언트 측에서 웹 페이지를 렌더링 하는데 필요한 JS 파일 및 종속성을 다운로드해야 하고 브라우저는 페이지를 렌더링 하기 전에 모든 스크립트를 가져와서 실행해야 해서 SSR보다 로드 시간이 길다.
• 처음에 완전한 콘텐츠 없이 빈 HTML 파일을 제공해서 사전 렌더링 또는 동적 렌더링과 같은 적절한 기술이 구현되지 않으면 검색 엔진 최적화(SEO)에 문제가 발생할 수 있다.

---

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

SSR(Server Side Rendering)은 서버 쪽에서 콘텐츠를 생성하고 완전한 웹 페이지를 클라이언트에 보내는 방식으로 서버에서 요청을 처리하고 클라이언트로 보내면 렌더링 된 콘텐츠가 표시됩니다.

 

SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유는 다음과 같습니다.

• 서버에서 초기 HTML 콘텐츠를 생성해 클라이언트로 보낼 수 있어 검색 엔진 최적화(SEO)가 가능합니다.
• 사전에 렌더링 된 HTML을 클라이언트로 전송해 초기 콘텐츠를 표시하는 데 필요한 시간을 줄일 수 있습니다.

---

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

GitHub - vercel/next.js: The React Framework

npm run start로 실행되는 코드를 찾아보는 과제를 받아서 조금 당황했고 어떻게 수행을 해야 할지 몰라 다른 분들의 과제를 찾아보았습니다.

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

import arg from 'next/dist/compiled/arg/index.js'
import { startServer } from '../server/lib/start-server'
import { getPort, printAndExit } from '../server/lib/utils'
import isError from '../lib/is-error'
import { getProjectDir } from '../lib/get-project-dir'
import { CliCommand } from '../lib/commands'
import { resolve } from 'path'
import { PHASE_PRODUCTION_SERVER } from '../shared/lib/constants'
import loadConfig from '../server/config'

const nextStart: CliCommand = async (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']) {
    console.log(`
      Description
        Starts the application in production mode.
        The application should be compiled with \`next build\` first.

      Usage
        $ next start <dir> -p <port>

      <dir> represents the directory of the Next.js application.
      If no directory is provided, the current directory will be used.

      Options
        --port, -p          A port number on which to start the application
        --hostname, -H      Hostname on which to start the application (default: 0.0.0.0)
        --keepAliveTimeout  Max milliseconds to wait before closing inactive connections
        --help, -h          Displays this message
    `)
    process.exit(0)
  }

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

  const keepAliveTimeoutArg: number | undefined = args['--keepAliveTimeout']
  if (
    typeof keepAliveTimeoutArg !== 'undefined' &&
    (Number.isNaN(keepAliveTimeoutArg) ||
      !Number.isFinite(keepAliveTimeoutArg) ||
      keepAliveTimeoutArg < 0)
  ) {
    printAndExit(
      `Invalid --keepAliveTimeout, expected a non negative number but received "${keepAliveTimeoutArg}"`,
      1
    )
  }

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

  const config = await loadConfig(
    PHASE_PRODUCTION_SERVER,
    resolve(dir || '.'),
    undefined,
    undefined,
    true
  )

  await startServer({
    dir,
    nextConfig: config,
    isDev: false,
    hostname: host,
    port,
    keepAliveTimeout,
    useWorkers: !!config.experimental.appDir,
  })
}

export { nextStart }

가장 중요한 부분은 startServer 부분이었고 추가로 start-server.ts 파일도 함께 확인해 보았습니다.

packages/next/src/server/lib/start-server.ts

 

Getting Started: Installation | Next.js

 

next.js 설치

npx create-next-app@latest

앱 실행 후 빌드 오류 해결 과정

npm install next --save-dev

npx next build

npm run start

실행이 잘 되는 것을 확인할 수 있습니다.