원티드 프론트엔드 프리온보딩 챌린지 10월 사전과제 with Next.js

 

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

 CSR( 클라이언트 사이드 렌더링 )은 자바스크립트를 사용해 브라우저에서 직접 페이지를 렌더링하는 것을 뜻합니다. 모든 로직, 데이터 페칭, 라우팅은 서버가 아닌 클라이언트에서 처리됩니다. 

 장점으로는 초기 로딩 이후에는 빠른 속도를 보여줍니다. 초기 로드가 달성되고 브라우저에서 캐시 및 구문 분석할 수 있는 항목이 완료되면 이후 페이지 로드는 매번 서버에서 모든 정보를 가져와야 하는 SSR보다 빠르고 원활합니다.

두번째로는 SSR에 비해 서버에 부담이 적습니다. 초기 렌더링 이후 페이지를 새로 고치거나 사용자가 다른 페이지로 클릭했을 때 브라우저는 전체 페이지가 아니라 동적으로 필요한 요소만 렌더링합니다. 이는 라우팅 시 매번 새로운 페이지를 렌더링해 반환해야하는 SSR에 비해 서버에 가해지는 부담을 줄일 수 있습니다.

단점으로는 첫째로 자바스크립트를 다운로드하고 분석하는 과정에서 초기 페이지 로딩에 시간이 다소 걸릴 수 있다는 점입니다. 서버에서 렌더링한 페이지를 전달해주는 SSR과 달리 빈 HTML에서 모든 로직이 담겨있는 JS를 받아 구문을 분석하며 렌더링을 진행하기에 첫 진입 시 로딩 속도(FP)가 길다는 단점이 있습니다. 

두번째 단점은 SEO에 다소 취약하다는 점입니다. 하나의 html, 그것도 빈 html을 가져와 자바스크립트 구문 분석을 통해 페이지가 렌더링되는 CSR은 SEO를 담당하는 크롤러 입장에서 해당 서비스의 여러 페이지에서 정보를 가져오는데 불리할 수 있으며, 이는 검색 엔진 최적화에도 좋지 않은 영향을 미칠 수 있습니다. 물론 최근 구글 봇 등 크롤러들은 CSR에서도 SEO를 구분할 수 있다고 하지만, 그래도 선호도 측면에서는 MPA( Multi Page Application )가 더 우세하다고 합니다.

 

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

 첫째로 CSR에 비해 빠른 FP(First Paint)와 FCP(First Contentful Paint)를 제공합니다. 즉, 초기 페이지 로드가 더 빠르다는 장점이 있습니다. SSR은 서버에서 페이지를 렌더링(pre-rendering)한 후 유저에게 먼저 인터랙션이 불가능한 페이지를 전달해주고(TTV) 이후 브라우저에서 JS 구문을 읽으며 수화(hydration) 과정을 거쳐 인터랙션이 가능해지는(TTI) 순으로 실행됩니다. 이 과정을 통해 유저는 CSR에 비해 빠르게 초기 화면을 보게 되고, 이는 '서비스가 빠르다'는 인식을 줄 수 있기에 사용자 경험이 좋아질 수 있습니다.

 둘째로 더 나은 SEO를 위해 필요합니다. SSR을 사용하게 되면 크롤러가 쉽게 해석할 수 있는 형태로써 제공할 수 있기 때문입니다. 크롤러는 해당 웹 사이트에 있는 링크들을 타고 다니며 새로운 페이지를 찾는 일을 계속 수행하고, 이렇게 들어간 웹페이지의 정보들을 구글 검색 색인에 저장하는 역할을 수행합니다. 하지만 SPA에서 CSR로 제작된 서비스에서는 그 역할을 수행하기 어려운데, 그 예로 React 파일 구조를 보면 1개의 html 파일 안에 빈 <div>만 존재하는 것을 들 수 있다. 빈 div 태그 안에는 렌더링 이후 내용들이 채워지게 되지만 그 전까지는 말 그대로 '비어 있는' 상태이기에 크롤러가 원하는 정보를 찾기 어렵고 이것이 검색 엔진 최적화에 영향을 주게 됩니다. 이에 미리 그린 페이지를 전달하는 SSR은 크롤러가 정보를 찾고 색인하기 적합하기에 필요합니다.

 

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

 

우선 next.js github 레포지토리에서 찾은 실행되는 코드의 경로는 다음과 같습니다.

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

우선 잘못된 키워드로 명령어를 입력했을 때에 대한 안내 혹은 build를 진행하지 않고 start를 진행했을 때에 대한 안내에 대한 내용이 초반에 존재합니다. --help, --port 등의 cliCommand나 --h와 같은 alias에 대한 안내도 존재합니다. 

이후 문제 없이 진행되면 0.0.0.0 또는 --hostname으로 지정한 값과 함께 `:포트 넘버` 가 붙은 링크를 터미널로 보여주며 앱이 준비되었음을 알려줍니다. 앱은 `_app.js` (타입스크립트라면 _app.tsx), `_document.js` 파일이 차례로 실행되며 제작한 페이지를 보여주게 됩니다.

 

마지막으로 레포지토리에서 찾은 코드를 첨부합니다.

import arg from 'next/dist/compiled/arg/index.js'
import { startServer } from '../server/lib/start-server'
import { getPort, printAndExit } from '../server/lib/utils'
import * as Log from '../build/output/log'
import isError from '../lib/is-error'
import { getProjectDir } from '../lib/get-project-dir'
import { cliCommand } from '../lib/commands'

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']) {
    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'] || '0.0.0.0'
  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

  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 }