➡️ Next.js란?
😎 Next.js는 개발자가 웹 서비스를 빠르게 개발하는데 필요한 도구를 제공하는 React 프레임워크입니다.
react는 유저가 화면에서 보는 요소들을 구현하는 js 라이브러리입니다.
Next.js가 프레임워크로써 react에 필요한 도구와 설정을 처리하고 코드의 구조, 추가적인 기능들과 최적화까지 함께 제공한다는 의미입니다.
➡️ Next.js가 필요한 이유
- Next.js를 사용하면 react로 ui를 구현하고 라우팅, 데이터 페칭, 성능과 같은 요소를 해결함과 동시에 개발자 경험(개발자 경험(DX)이란? 개발자가 제품을 사용하거나 개발하는 동안의 경험)까지 개선할 수 있습니다.
- React만으로 서비스를 만들기 위해선 고려해야할 사항이 많습니다. 웹팩과 같은 번들러를 사용해 코드를 번들링하고 바벨과 같은 컴파일러를 사용해 변환도 해줘야하죠. 적절한 코드 분할로 최적화도 해야하고 SEO를 위해 일부 페이지를 미리 렌더링 해야할 수도 있습니다.
- Next.js는 적절한 추상화를 통해 개발자가 직접 고려해야하는 위와 같은 사항들을 해결해줍니다.
➡️ Next.js에 탑재된 기능
- 직관적인 파일 시스템 기반 라우팅 시스템
- 페이지 단위의 사전 렌더링(Pre-rendering), 정적 생성(SSG), 서버 사이드 렌더링(SSR)
- 서버 사이드 렌더링(SSR)이란? 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식입니다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(view)을 만들어 제공하는 것이죠. 즉, 서버가 화면(view)을 그리는 주체가 됩니다.
- 클라이언트 사이드 렌더링(CSR)이란? 클라이언트인 브라우저가 렌더링을 처리하는 방식입니다. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(view)을 그리는 주체가 되는 것이죠.
- 빠른 페이지 로딩을 위한 자동 코드 분할
- 최적화된 프리페칭(prefetching? 데이터가 실제로 필요하기 전에 사전에 데이터를 가져오고 캐시에 저장하는 프로세스를 말한다.)을 통한 클라이언트 사이드 라우팅
- 빠른 새로고침을 지원하는 개발환경
- 서버리스 함수로 API 엔드포인트를 구축할 수 있는 API 라우팅
- 완전한 확장성
