Next.js

• git remote add origin https://github.com/devgsheep/til_next.git

1. Next.js 특징

• React.js 를 더 편하게 사용할 수 있는 기능을 미리 제공
• Next.js는 웹 개발 프레임워크이다. (프레임워크는 미리 기능을 만들어서 제공함.)
• React.js 는 그냥 js 라이브러리이다.

2. 라이브러리와 프레임워크의 차이

• 기능 구현의 주도권을 개발자가 가짐 : 라이브러리
• 기능 구현의 주도권이 개발자에게 제한적이다. : 프레임워크
• 오해하면 안됩니다. (개발 주도권이 개발자에게 있는 것이 좋지 않습니다.)
  • 쓰고 싶은 기능을 개발자가 선택하는 자유가 있음.
  • 개발의 결과물에 대해서 유지, 보수가 개발자에게 한정됨.
  • 대규모 프로젝트에서는 라이브러리 선택에 따라서 개발 진행 변경됨.
  • 컨벤션 유지가 어렵다.
• Next.js 즉 프레임워크는 자유도가 낮다.
  • 자유도가 낮은 대신에 거의 모든 기능을 기본적으로 제공한다.
  • 복잡한 기능을 기본적으로 제공해주므로 많은 부분이 해결되어져 있다.
  • React.js 에 추가적인 기능을 보완했으므로 상당히 이해하기 수월하다.

3. Next.js의 사전 랜더링(Pre-Rendering)

• 면접볼때 왜 Next.js 쓰는지 물어볼때 1순위로 추천
• 사전 렌더링이란
  • 웹 브라우저의 요청에 Server에서 미리 렌더링 완료한 HTML을 응답으로 제공함.
  • React.js 는 CSR(Client Side Rendering)으로 렌더링, 즉 화면에 HTML 출력 느림
  • Next.js 는 사용자 요청이 들어오면 서버에서 컴포넌트들을 렌더링하고 그 결과물을 응답해줌.
  • SEO 에 최적화됨으로 인해서 검색노출에 유리함.

4. CSR 에 대해서 상세하게 이해하기

• js로 html을 즉시 생성하는 방식
• 리액트의 기본적인 렌더링 방식(Client Side Rendering)
• 랜더링 단계
  • 1단계 : 사용자 > 웹브라우저 요청 > 서버에서 빈 껍데기 HTML 응답 > 웹 브라우저 출력 > 사용자
  • 2단계 : 다시 서버에서 js 압축파일(JS Bundle) > 웹 브라우저 응답
  • 3단계 : 웹브라우저 JS Bundle 실행 > 웹브라우저 HTML 출력 > 사용자
• 장점
  • 페이지 이동이 상당히 빠르다는 장점
  • 초기 접속 후 라우터 이동은 상당히 빠르다는 장점
  • 서버에서 응답하는 JS Bundle에 모든 기능관련 코드를 내려 받았으므로
• 단점
  • 치명적으로 초기 렌더링이 느리다는 단점.
  • 접속 이후에 첫화면을 렌더링할때까지 시간이 많이 걸림
  • FCP(First Contentful Paint)가 느리다. (요청 후 첫 렌더링 되는 시간)
  • FCP가 10초 이상이면 이탈율이 150% 이상임.

5. SSR 에 대한 이해

• Server Side Rendering 의 줄임말
• Next.js 의 특징으로 CSR의 단점을 보완함.
• 렌더링 단계
  • 사용자 > 웹 브라우저 요청 > 서버에서 JS 번들을 실행 > HTML 생성 > 웹 브라우저 응답
• SSR 에서의 실제 렌더링은 2단계를 거침
  • 1단계 : HTML을 서버에서 JS 번들을 이용해서 HTML 생성 후 > 웹 브라우저 렌더링
  • 2단계 : 하이드레이션(Hydration)을 통해서 JS의 상호작용기능을 적용함.

6. TTF (Time to Interactive)

• FCP 진행 이후에 사용자 상호작용 가능한 시점을 말함.
• 이 상호작용 가능한 시점을 TTI 라고 합니다.

7. 결론

• 위의 내용은 면접에서 물어볼 수 있으며, Next.js의 이해를 위한 상식
• React App의 단점인 FCP를 개선하고 React App의 빠른 페이지 이동 활용