<aside> ⚙

Next.js vs. React

</aside>

• React는 프레임 워크가 아니다?
  • 페이지 라우팅의 경우를 예로 들자면, React Router Dom이라는 외부 라이브러리를 사용
  • 이와 같이, 리액트는 특정 기능을 구현하기 위해서 필요한 라이브러리를 import를 통해 받아와야 함
• Next js 가 프레임 워크 인 이유
  • 자유도가 낮은 대신 웹 구현에 필요한 모든 기능들이 다 포함되어 있음
  • React와 달리 외부에서 라이브러리를 불러오지 않고도 내부적으로 웹 기능 구현을 할 수 있음

<aside> ⚙

사전 렌더링

</aside>

브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식

• CSR (Client Side Rendering)의 단점을 효율적으로 해결하는 기술

  → CSR 의 경우 초기 접속 이후의 페이지 이동은 빠름

  → 초기 접속 속도가 느려짐 (번들을 통해 미리 다 다운 받기 때문)

  → FCP (초기 접속 속도) : 사용자의 이탈률과 연관됨

<aside> ⚙

사전 렌더링은?

렌더링이 완료된 HTML을 그대로 브라우저에 전송 후, 그대로 화면에 렌더링

• 이 시점이 FCP가 되어, CSR의 FCP보다 크게 단축 됨 </aside>

• 렌더링이란