inflearn - 한 입 크기로 잘라먹는 Next.js(v15) 이정환
위의 수업을 듣고 블로그로 정리한 내용입니다.

Next.js란

Next.js는 오직 리액트만을 위한 리액트 전용의 웹 개발 프레임워크 입니다.
리액트를 기존보다 훨씬 더 강력하고 편하게 넓은 범위의 개발을 활용하도록 다양하고 강력한 기능들을 제공하고 있는 기술입니다.

다양한 최적화 기능 등등의 추가 기능들을 몇 개 붙여 놓은 리액트의 확장판 정도로 이해하면 좋습니다.

Next.js가 인기가 많은 이유는 라이브러리가 아닌 프레임워크이기 때문입니다.
반면에 리액는 Next.js와는 다르게 UI 개발을 위한 라이브러리 입니다.

프레임워크와 라이브러리의 차이는?

프레임워크와 라이브러리는 어떠한 기능 구현의 주도권이 누구에게 있는가에 따라 있으면 라이브러리 없으면 프레임워크로 불릴 수 있습니다.

리액트는 주도권을 개발자가 가짐으로써 기능 구현을 원하는 방향으로 진행하고 쓰고싶은 도구, 쓰고싶은 기술을 쓰며 별다른 제약 없이 구현합니다.

반면에 Next.js 같은 프레임워크에서는 주도권은 프레임워크가 직접 가지고 있습니다. 어떠한 기능을 구현할 때 프레임워크가 자체적으로 제공하는 기능을 이용하거나 또는 프레임워크가 허용하는 범위 내에서만 추가적인 도구를 선별해서 사용할 수 있습니다.

Next.js같은 경우 자유도가 낮기 때문에 거의 모든 필수적인 기능들을 기본적으로 제공해줍니다. 그렇기 때문에 페이지 라우팅, 최적화, 사버 사이드 렌더링 등등 웹 개발에 필요한 모든 기능들이 제공되고 있습니다.

Next.js 사전렌더링 이해하기

Nest.js를 대표하는 핵심 기능 중에 하나인 사전 렌더링에 대해서 알아보려고 합니다.
사전렌더링을 이해하는 것은 Next.js 구동 방식을 이해가 가능합니다.

리액트 렌더링 CSR과 차이점

브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식입니다.
이런 렌더링 방식은 기존의 리액트 앱이 따르고 있던 Client Side Rendering의 단점을 효율적으로 해결하는 기술입니다.

이러한 방식이 어떻게 기존 리액트 앱의 Client Side Rendering 방식의 문제를 해결할까?

리액트의 CSR 렌더링 방식은

위와 같은 방식으로 작동하면 초기 접속 이후에 일어나는 페이지 이동들을 매우 빠른 속도로 쾌적하게 처리할 수 있어 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있습니다.

하지만 서버에서 브라우저로 보내느 JS Bundle같은 경우에는 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재해 브라우저에는 모든 코드를 다 가지고 있습니다.
그렇기에 새로운 페이지를 이동하더라고 서버에게 새로운 페이지를 요청할 필요가 없습니다.

하지만 단점으로는 초기 접속 속도가 느려진다는 것입니다. 실제로 화면이 렌더링 되기까지 꽤 오랜 시간이 소요 됩니다.
브라우저가 화면의 컨텐츠를 렌더링하기까지 빈 껍데기의 HTML도 받아와야 되고 리액트 앱도 받아서 최종적으로 리액트 앱을 실행까지 시켜야 하기 때문에 오래 걸립니다.
요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간을 FCP(First Contentful Paint)라고 표현합니다.
FCP는 웹페이지의 성능을 대표할 정도로 굉장히 중요한 지표입니다.

리액트는 초기 접속 요청 시에 브라우저가 HTML 렌더링과 리액트앱까지 직접 실행해야 되기 때문에 최초로 컨텐츠가 화면에 렌더링되는 시점인 FCP가 늦어진다는 단점을 가지게 된 것입니다.

그래서 Next.js는 기존 리액트 앱의 렌더링 방식인 CSR의 단점을 해결하기 위해 사전 렌더링을 제공합니다.

사전 렌더링 구동 방식

사전렌더링은 서버가 서버 측에서 직접 리액트 앱을 직접 실행 시켜서 모든 리액트 컴포넌트들을 HTML로 변환 즉 사전에 렌더링을 수행하게 됩니다.
렌더링 된 HTML 파일을 그대로 브라우저에게 보내주게 되며 그대로 화면에 렌더링 하게 됩니다. 그러면 사용자는 이때부터 바로 완성된 화면을 볼 수 있습니다.
사전 렌더링의 FCP는 리액트 앱보다 큰 폭으로 단축됩니다.

화면이 보인다고 완성된 것이 아닙니다. 아직 이벤트들을 처리할 자바스크립트 코드가 없어서 상호작용이 불가능 한 것입니다.
그래서 Next 서버가 곧바로 브라우저에게 후속으로 모든 자바스크립트 코드 즉 리액트앱을 번들링해서 브라우저에게 보내주게 됩니다.
브라우저는 서버로부터 받은 자바스크립트 코드 즉 리액트 앱을 직접 실행해서 현재 화면에 렌더링이 되어 있는 HTML 요소들과 연결을 시켜주게 됩니다.
이러한 과정을 수화라고 하며, 이런 과정을 거치게 되면 최종적으로는 웹페이지가 상호작용까지 가능해지는 상태가 됩니다.

상호작용이 가능해진 시점을 Time To Interactive(TTI)라고 해서 표현하기도 합니다.
그 이후에 발생하는 페이지 이동을은 기존의 CSR 방식 그대로 사용해서 장점을 그대로 가져오게 됩니다.

최종적으로 리액트의 단점을 해소하며, 빠른 FCP 달성, 빠른 페이지 이동, 리액트의 장점은 계승 렌더링 해줍니다.