[Next.js]-원티드 프리온보딩 10월 챌린지 사전 과제

Posted on | In

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

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

(1) CSR의 정의

  • 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미합니다. 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드합니다.
1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <title>CSR</title>
    <link rel="stylesheet" href="app.css" type="text/css">
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>
  • 최초로 불러온 html 파일 내용은 위와 같이 텅텅 비어있습니다. js 파일의 다운로드가 완료된 다음, 해당 js 파일이 빈 html 위에 dom을 그리기 시작합니다. CSR은 서버 호출을 최소화할 수 있습니다. 최초 호출 시에만 html, js, css 파일을 요청하고, 이후에는 화면에서 변화가 일어나야 하는 만큼만 요청합니다. 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라 자바스크립트 차원에서 새로운 화면을 그려냅니다.

(2) CSR의 장점

  • 사용자 경험
    첫 로딩만 기다리면, 서버에 의존하지 않고 클라이언트 혼자 그릴 수 있으므로 빠른 화면 전환이나 인터랙션이 가능하기 때문에 사용자 경험(UX)이 좋습니다. 이와 반대로 SSR은 blinking issue가 존재해 UX 관점에서 좋지 않습니다. blinking issue란 새로고침 시 웹사이트 전체를 다시 서버에서 받아와 화면이 없어졌다가 나타나는 현상입니다.
  • 서버 부담 감소
    SSR에 비해 서버에 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 적습니다.

(3) CSR의 단점

  • SEO(검색 엔진 최적화)에 불리
    CSR은 최초로 불러온 index.html에 뼈대만 있기 때문에 검색 엔진 봇들이 크롤링 할 내용이 없어서 SEO에 불리합니다.
  • 느린 초기 로딩 속도
    CSR은 초기에 JS를 읽어서 무엇을 그려야 할지를 판단하고 그리는 작업을 하는 동안 딜레이가 생기게 됩니다. code splitting, tree-shaking, chunk 분리를 통해 JS 번들 크기를 줄여서 초기 DOM 생성 속도를 줄이면 초기 로딩 속도를 개선할 수 있습니다.

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

글자 그대로 SPA는 하나의 페이지(Single Page)로 구성되어 있습니다. 사용자가 한 페이지 내에 머무르면서 서버에서 필요한 데이터만 받아와 부분적으로 업데이트합니다. 이런 방식을 통해 웹 사이트에서도 앱과 같은 사용자 경험이 가능합니다. 일반적으로 SPA에서는 렌더링 방식으로 CSR을 사용합니다. CSR은 검색 엔진 최적화에 불리하다는 치명적인 단점이 있습니다. 반대로 모든 데이터가 이미 HTML에 담겨진 채로 브라우저에 전달되는 SSR은 검색 엔진 최적화에 유리합니다. 따라서 SPA가 SEO에 불리하다는 단점 때문에 SSR 도입이 필요하다고 생각합니다.

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

Next.js에서는 _app.js가 가장 먼저 실행됩니다.

_app.js는 다음과 같습니다.

1
2
3
4
5
6
7
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

모든 페이지에서 공통적으로 사용하는 것들(NavigationBar, 글로벌 스타일 등)을 _app.js에서 한 번에 적용할 수 있습니다. 페이지 전환 시 레이아웃과 상태 값을 유지할 수 있습니다. props로 Component와 pageProps를 받습니다. Component는 페이지들 중 현재 선택된 페이지입니다. GET / 요청을 보냈다면, Component는 /pages/index.js 파일에 해당합니다. pageProps는 기본적으로 빈 객체지만, data fetching method를 사용했다면 method를 통해 가져온 초기 객체가 전달됩니다. _app.js 다음에는 _document.js가 실행됩니다.

참조

참조

0%