Next.js❓
- React.js 전용 웹 개발 프레임워크 ⚒
- 그냥 기존의 React.js라는 기술에 페이지 라우팅, 빌트인 최적화 등등의 기능이 추가된 확장판이라고 생각하면 편하다.
- 그런데 React.js는 UI 개발을 위한 자바스크립트의 라이브러리라고 소개한다.
프레임워크(Framework) vs 라이브러리(Library)
☑️주도권이 개발자에게 있다: 라이브러리(Library)
-> 기능 구현을 원하는 방향으로 진행한다
-> 쓰고싶은 도구, 쓰고싶은 기술을 쓴다.
-> 높은 자유도
-> But, 기본 기능 외 제공 X
☑️주도권이 개발자에게 없다: 프레임워크(Framework)
-> 프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 추가 도구를 사용할 수 있다.
-> 낮은 자유도
-> But, 거의 모든 기능을 제공 - 그래서 Next.js에서 페이지 라우팅 기능을 구현한다면 Next.js가 제공하는 라우터인 Page Router 또는 App Router 중에서 선택해야한다.
사전 렌더링 이해하기
사전 렌더링❓
- 브라우저 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식이다.
- 이는 Client Side Rendering의 단점을 효율적으로 해결하는 기술이다.
뭘 어떻게 해결한다는..?🤔
- Client Side Rendering(CSR)은 React.js 앱의 기본적인 렌더링 방식으로 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식이다.
- 이 방식을 사용하면 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다.
- 왜냐하면 최초 비어있는 index.html 이후 받아온 JS 번들에는 앱을 실행시키기 위한 코드들이 다 들어있어서, 브라우저가 자체적으로 컨텐츠 렌더링을 할 수 있기 때문이다.
- 그럼 단점은??
- 초기 접속 속도가 느려진다는 것이다.
- 요청 이후 index.html 파일도 받아야해, JS 번들도 받아야해, JS 실행해야해, 컨텐츠 렌더링 해야해 이런 과정들을 거쳐야하기 때문에 브라우저가 할 일이 너무 많아서 시간이 오래 걸린다는 것이다. (FCP / First Contentful Paint)
🌟그래서 사전 렌더링을 통해 단점을 극복하고자 했다.
- 서버에서 JS 실행해서 렌더링(1)된 HTML을 클라이언트로 전송하니 브라우저는 그대로 화면에 렌더링(2)하면 된다.
- 사용자는 바로 완성된 화면을 볼 수 있다. 그래서 FCP가 큰 폭으로 단축된다.
렌더링이 2가지 의미를 가지고 있다.
☑️ 렌더링(1): 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정.
☑️ 렌더링(2): HTML 코드를 브라우저가 화면에 그려내는 작업. - 그런데 지금 상태에서는 화면만 볼 수 있지 인터렉션(상호작용)이 불가한 상태이다.
- 그래서 Next 서버가 곧바로 브라우저에게 후속으로 자바스크립트 코드(리액트 앱)을 번들링해서 보내준다.
- 그러면 브라우저는 서버로 받은 JS를 실행해서 HTML 요소들과 연결한다. (Hydration)
- 이 과정까지 거쳐야 상호작용까지 가능해진 웹사이트가 되는데, 이 시점을 TTI(Time to interactive)이라고 표현한다.
- 이후에 페이지 이동 요청을 하게되면 브라우저에서 JS를 실행해서 컴포넌트를 갈아끼우는 형식으로 페이지 이동이 진행된다. (CSR 방식으로 처리한다.)
중고