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

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

기본적으로 CRA로 설치한 리액트는 SPA/CSR로 동작한다.
브라우저가 서버에 HTMl과 javscript(이하 js) 파일을 요청하고 로드되면, 사용자의 상호작용에 따라 js를 이용해서 동적으로 렌더링 시키는 기법이다.

• 장점
  첫 로딩만 기다리면, 동적으로 빠르게 렌더링 되기 때문에 사용자 경험(UX)이 좋다.
  서버에 요청하는 횟수가 훨씬 적기 때문에(처음에 다 가져오기 때문에) 서버의 부담이 덜하다.

• 단점
  첫 로딩에서 모든 스크립트 파일이 로드될 때까지 기다려야한다.
  가장 큰 문제는 SEO, 검색엔진 최적화에 문제가 있다.
  = 대부분의 검색엔진들은 JS파일을 읽지 못하기 때문이다. 이 문제가 크게 작용해 SSR이 등장한 이유도 있어보인다.
  SSR같은 경우에는 모든 파일을 HTML로 변환하여 관리하기때문에 SEO에 강점이 있다.

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

• SPA는 하나의 HTML 파일을 기반으로 JS를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹어플리케이션이다. 대표적으로 리액트를 들 수 있다.
  전통적인 방식으로는 SPA에 CSR을 렌더링하는 것인데, SPA에 SSR을 렌더링하는 방식에 장점이 있다. 이 장점을 활용한 것이 NEXT.JS 이다.

기존의 SPA - SSR 방식은 위에 작성한 단점이 크게 작용하여, SEO의 문제가 크게 부각되었다.

• SSR은 브라우저가 페이지를 요청할 때 마다 해당 페이지에 관련된 HTML, CSS, JS파일 및 데이터를 받아와서 실행시킨다.
  그때 그때 요청하여 불러오기 때문에 초기 로딩 속도가 빨라 사용자가 컨텐츠를 빨리 볼 수 있다.
  또한 모든 파일을 HTML로 변환하여 주기때문에 검색엔진 최적화(SEO)가 가능하다.

특히 블로그나 상세페이지, 게시판, 포트폴리오 등 글자들이 검색되어야할 때 SPA-SSR을 사용한다.
하나의 프로젝트 안에서도 CSR과 SSR을 함께 사용하여 효율을 높이는 것으로 알고 있다.
SEO 측면에서 기존의 문제를 해결하기 위해 SPA-SSR의 도입이 필요하다.

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

https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
https://github.com/vercel/next.js/ (Next.js Github 레포지토리)

디렉토리 : next.js/packages/create-next-app/templates/default/pages/_app.js

_app.js

import '../styles/globals.css'

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

export default MyApp

기본적으로 _app.js가 실행되는데, 이는 함수로 구성되어있다. 함수 이름은 MyApp이 초깃값이다.
CSS관리를 위해 global.css를 import해주고있고, 함수 내부에서는 components와 pageProps두 개의 매개 변수를 props로 받는다. 이 함수의 결과는 어떤 컴포넌트를 불러와 실행하느냐에 달려있는데, router 기반이 아니라 page기반이기 때문에 어떤 페이지냐의 정보를 pageProps가 spread로 다 컴포넌트에 뿌려주는 듯하다.

NEXT를 공부하며, 더 깊이 알아봐야겠다.