Next js 시작하기

왜 많이 사용하는가?

Library가 아닌 Framework 이기 때문입니다.

참고로 next는 React.js 전용 웹 개발 프레임워크이고, React는 라이브러리입니다.

프레임워크 vs 라이브러리

기능 구현의 주도권이 누구에게 있는가?

주도권이 개발자에게 있다 -> Library
주도권이 개발자에게 없다 → Framework

• Library
  • 어떤 기능을 구현할 때 제약없이 사용합니다.
  • Ex) React page routing에서 React router또는 tanstack을 사용합니다.
• Framework
  • 기능 구현 시 프레임워크가 자체적으로 제공하는 범위 내에서 사용 가능합니다.
    

자유도

Next < React

자유도가 낮다고 하는 Next를 사용하는게 괜찮을까요? 너무 높아도 좋지 않습니다. 왜냐하면 주요 기능을 제외한 그 외의 모든 기능을 만들거나, 비슷한 기능을 하는 라이브러리를 직접 찾아야하기 때문입니다.

Next는 웹개발에 필요한 모든 기능이 제공됩니다. 추가로 React 확장판이라서 빠르게 배울 수 있습니다.

사전렌더링

브라우저 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식입니다. 이것은 CSR의 단점을 효율적으로 해결합니다.

CSR

Client Side Rendering의 약자는 CSR은 React에 기본적인 렌더링 방식입니다. 클라이언트에서 직접 화면을 렌더링합니다.

장점

• 페이지 이동이 매우 빠르고 쾌적합니다.

  • 서버에서 브라우저로 JS Bundle 과정이 일어납니다. 여기엔 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재합니다.
  • 초기 접속 이후 페이지 이동하게 되더라도 서버에 새로운 페이지를 요청할 필요가 없어집니다.
    

단점

• 초기 접속 속도가 느립니다.
  - 초기 접속에서 실제로 화면 렌더링까지 오래 걸립니다.
  • 컨텐츠 렌더링 전까지 index.html도 받아오고 js 번들 파일도 받아온 다음 js 실행까지 해야 합니다.

FCP(First Contentful Paint)

"요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간

Next의 렌더링

여기서 렌더링은 두 가지 종류가 있습니다.

• JS실행(렌더링): JS코드를 HTML로 변환합니다.
• 화면에 렌더링: HTML코드를 브라우저가 화면에 그립니다.

상호작용이란 html이 아닌 js가 처리하는 영역이기 때문에 FCP 시점에서는 상호작용이 불가능합니다.

JS 번들링이 끝나고 브라우저에서 html을 연결하면, 상호작용이 가능한 페이지가 됩니다.

수화(Hydration)

브라우저가 js번들링 후 html과 연결할 때, html에 js를 뿌리는 형태같다고 하여 수화(Hydration)이라 불립니다. 참고로 TTI는 Time To Interactive의 약자로 초기 요청에서 hydration까지의 시간을 말합니다.

페이지 이동 요청

CSR과 같은 방식

앞선 초기접속 요청과정에서 hydration을 위해 서버가 브라우저에 js 번들파일(React app)을 전달했기 때문에 사실상 리액트 컴포넌트를 미리 받아온 것입니다.

사전렌더링

서버측에서 js코드를 html로 미리 렌더링하는 사전렌더링을 통해 기존 CSR의 단점인 FCP를 개선하고, 페이지 이동은 CSR과 똑같이 동작합니다.

참고

한 입 크기로 잘라먹는 Next.js