[ NextJs v13 ] 01_NextJs v13은 무엇이 달려졌는가

2022년 말 ~ 2023년 지금까지 React 생태계에서 가장 큰 변화를 가져온 것은 NextJs v13으로의 업데이트일것입니다.
이전 버전들의 NextJs에서의 컨셉과 비교했을 때 정말 많은 변화가 생겼으며, 이러한 변화들을 하나씩 정리하려합니다,
 

1. React만 사용하는 것은 더이상 권장되지 않는다.

소제목을 조금 자극적으로 작성면도 있지만, 이 소제목은 실제로 React 공식 팀원이 말한 내용입니다

왜 이런 내용을 언급했을까요?
React는 2013 ~ 2014년에 나온 프레임워크로, SPA라는 개념을 이용하여 빠른 페이지 이동등 많은 이점을 선보였고 이러한 장점에 힘입어 현재까지 가장 인기있는 자바스크립트 프레임워크 자리를 차지하였습니다.
 
하지만, SPA를 기반으로 하는 React에는 장점만큼 단점도 존재하는데요,

1. 프레임워크라고는 하지만, 너무 많은 써드파티 라이브러리가 필요함
2. 서버 사이드 로직을 작성하기 어려움
3. SEO 문제

예를들어 React에서는 라우팅을 구현하기 위해서 react-router를, 전역상태관리를 쉽게 하기 위해서 redux를 사용해야하는 등 너무 많은 외부 라이브러리에 의존해야합니다.
또한, SPA 방식은 분명 데이터를 모두 가져온 이후에는 빠르지만, 데이터를 가져오는데 html 뼈대와 js 코드를 모두 로딩해야하므로 비교적 오래 걸립니다.
 
이러한 문제들은 NextJs를 비롯한 여러 React 프레임워크에서 해결해줍니다.
NextJs로 예를 들자면, 라우팅은 파일(또는 폴더) 기반 라우팅이라는 규칙이 존재하고, 서버 사이드 렌더링도 지원합니다.
 
정리하면 React 팀원이 언급한대로, 대규모 프로젝트를 React로만 구축하기에는 위에서 언급한 문제들이 발생하므로, NextJs / Remix등과 같은 React 프레임워크를 사용하여 구축하는 것이 권장되고있습니다.
 

2. Server Component & Client Component

이번 NextJs v13에서 일어난 변화중 가장 큰 변화를 꼽으라면,
서버 컴포넌트를 기본값으로 도입한 것입니다

 

서버 컴포넌트는 React v18에서 컴포넌트를 server 컴포넌트와 client 컴포넌트로 경계를 나누면서 시작된 개념입니다. 
 
우선 서버 컴포넌트에 대해서 이해를 하려면, 하나의 고정관념을 깨고 시작해야합니다.
React는 클라이언트(브라우저)에서만 동작하고, 서버등에서는 사용할 수 없다 라는 내용을 아래와 같이 바꿔야합니다.

React는 클라이언트와 서버 모두에서 사용 가능하고, ReactDOM은 오직 클라이언트(브라우저)에서만 사용 가능하다

보통 React 앱을 구축할때 reactDOM과 같이 사용하기때문에, React는 오직 클라이언트에서만 사용할 수 있다고 생각될수있는데, React는 단지 UI를 만드는 방법을 표현할 수 있는 프레임워크입니다.
따라서 React와 ReactDOM을 같이 가져가는 것이 아닌, React만 가져간다면 React는 어느 환경에서도 사용 가능해집니다

 

Client Component

기존 React 컴포넌트
  - 기존 React 컴포넌트는 일반적으로 sync 방식으로 작동하고 JSX를 반환함
    따라서 컴포넌트에 async await를 걸어 작동시킨다거나의 행동이 불가능했음 (왜나하면 react 컴포넌트는 생명주기등  과 렌더링 방식을 고려했을때 동기적으로 진행되어야함)
  - 만약 기존 React 컴포넌트에서 상태를 저장, 추적등을 하고싶다면 react hook을 이용해야함

client 컴포넌트는 지금까지 사용하던 일반적인 react 컴포넌트를 의미합니다 즉, react hook이나 브라우저에 접근하는 등의 행동이 가능함을 의미합니다

하지만 Next에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트이므로 클라이언트 컴포넌트로 활용하려면 파일 상단에 "use client"로 해당 컴포넌트가 클라이언트 컴포넌트인것을 알려야합니다

또한 서버컴포넌트에서 클라이언트컴포넌트로 직렬화되지않은 props은 전달할수없습니다 (ex, 함수 / date)
    - 왜냐하면 서버와 클라이언트가 통신하는데에는 네트워크를 이용
    - 하지만 네트워크를 통할려면 데이터는 직렬화되어있어야함 (JSON등)

 

Server Component

serve 컴포넌트의 핵심 목적은 서버에서만 실행되어 데이터를 가져오고 렌더링하는 것입니다. 클라이언트에서는 추가적인 JavaScript 실행 없이 해당 컴포넌트를 사용합니다.

서버 컴포넌트는 일반적인 JavaScript 함수와 유사하게 동작하며, 비동기 연산 (ex, DB 쿼리, API 호출 등)을 수행할 수 있습니다.

 

이러한 서버 컴포넌트의 가장 큰 특징으로는, 처음에 언급한 문제중 하나 "js 코드를 처음에 모두 로드한다"라는 방식의 클라이언트 컴포넌트와는 달리, js 코드를 필요시 로드(스트리밍 방식)합니다

 

또한, 서버 컴포넌트에서는 일반적으로 서버로직 (node.js에서 작성하던 로직)을 작성할 수 있으므로, 서버로직(데이터 패칭등..) + 클라이언트로직(UI 렌더링)을 통합하여 사용할수있습니다

단, 주의할점은 클라이언트(브라우저)에서만 작동 가능한 로직은 실행불가능합니다 (ex, window나 document와 같은 브라우저 전용 객체에 접근할 수 없음)
또한 useState, useEffect 등의 일부 react 훅과 이벤트헨들러등을 사용할 수 없습니다.