[Next.js] Next.js에 대해

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 1일차 내용 정리

 

Next.js란? : 리액트 기반의 프레임워크. 서버사이드 렌더링과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있도록 설계됨. Next 서버가 있어서 풀스택 개발도 가능.

 

리액트와의 차이점 : 리액트는 라이브러리이고 CSR, Next.js는 프레임워크이고 SSR.

 

라이브러리 vs 프레임워크 : 내 규칙 위에 올라가는 것이 라이브러리, 정해진 틀에 맞춰주어야 하는 것이 프레임워크. 협업하는 관점에서는 프레임워크가 좋을 수도 있다. eslint 규칙을 커스텀하기 힘들다면 구글이나 airbnb의 규칙을 가져와서 쓰는 것처럼...

 

Next.js의 장점과 단점 : 서버가 있다는 것.

 

CSR : 주소를 치면 브라우저(클라이언트) 정적 배포(S3 같은 스토리지)로 GET 요청을 보내면 서버가 index.html을 응답한다. 그 후에 /style.css와 /main.js 등을 요청하여 style.css, main.js 파일을 배포로부터 받아온다.

 

SSR : 똑같이 요청을 보냈을 때 백엔드 서버(ECS) 같은 것이 존재한다. 렌더링된 html 파일을 응답한다.

 

SSR의 장점

• CSR은 네트워크로 요청하지만 SSR은 내부 서버로 요청한다. 개인 device보다는 보통 서버의 성능이 좋기 때문에 처리 성능에서 이점이 있다.
• 내부 통신으로 이루어지므로 네트워크 성능의 이점도 있다.
• SSR도 HTML을 다운받은 뒤 JS를 따로 다운받기는 하지만, CSR보다 다운받아야 할 JS의 양이 줄어듦.
• API가 은닉화된다.
• FCP(첫 요소 렌더링) 성능이 향상된다.

SSR의 단점 : 서버 부하, 서버 비용, 개발 복잡도, 페이지마다 계속 html을 만들어야 하므로 응답 시간이 증가한다.

 

13+ 버전이어야 한다 : App Router, React Server Component, Server Fetching 기능이 생김.

 

Page Router vs App Router : Page Router에는 SSG를 위한 getStaticProps(), SSR을 위한 getServerSideProps()가 있음. getStaticProps는 정적 html 파일이며, build 시점에 실행되어 다시 build 할 때까지 다시 실행되지 않음. getServerSideProps는 요청 받은 시점에 재실행되며 동적으로 html 파일이 생성된다.

 

Page Router의 단점 : 무조건 최상단에 위치해야 한다는 것, 독자적인 next.js의 문법이 있다는 것, 그리고 내부 컴포넌트에서는 동작을 예측하기가 어렵다는 게 단점.https://doringri.tistory.com/135 << Page Router 코드 예시

 

React Server Component(RSC) : React가 제공하는 기능. 그리고 Server Action은 Next.js에서 제공하는 기능이다.

export default async function Page() {
    const res = await fetch("...next.js");
    return res;
}

 

보통 위처럼 async function으로 컴포넌트를 만들고 서버에서 가져오는 식이다. Page Router에 비해 코드가 매우 간결하다. 이 코드는 컴포넌트 안에서 바로 서버 데이터를 받아올 수 있지만 Page Router는 getServerSideProps에서만 가능하다.

 

Suspense : RSC와 같이 많이 사용되며, 로딩 중 UI를 표시할 때 사용됨.