[13주차] Next.js를 사용하는 이유

📌 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

---

😭 순수 리액트의 한계

• 순수 리액트는 Single Page Application & Client Side Rendering을 지원
• 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 HTML을 가져와 script를 로딩하는 방식이기 때문에 첫 로딩 시간이 오래 걸림 → UX 저하
• SEO에 취약
  • 대부분 웹 검색 엔진의 크롤러 봇은 JS까지 다 다운받고 실행하지 않고, 그냥 HTML에 들어있는 내용으로만 정보를 수집
  • 따라서 CSR 방식은 빈 HTML 파일을 보내주니까, 수집할 정보가 없는 것! → SEO에 취약할 수밖에 없다.

👍 Next.js를 사용하는 이유

프리렌더링

• Next.js는 정적 생성과 SSR을 지원하여 프리렌더링이 가능하다.
• 프리렌더링을 통해 미리 렌더링된 HTML을 가져오기 때문에 첫 로딩 시간 단축
• 미리 생성된 HTML을 불러오기 때문에 기존 순수 리액트의 SEO 문제도 해결이 가능하다.

Client side navigation

• Link 컴포넌트를 통해 페이지 이동할 때 페이지 전체 html을 불러오는 것이 아니라,
• html은 미리 전 페이지에서 불러놓고
• 페이지가 넘어갈 때는 필요한 json 데이터만 가져오기 때문에 페이지 이동 속도도 빨라지고, 넘어가는 동작도 부드럽다.

Code Splitting

• Code Splitting은 웹의 첫 페이지가 로딩될 때, 모든 번들을 묶어 하나의 javascript payload를 보내는 것이 아니라 여러 조각으로 나눠서 필요한 부분만 보내주는 방식이다.
• 웹 페이지 로딩 시간을 개선할 수 있다.
• Next.js를 사용하면 dynamic import를 사용해 간단하게 Code Splitting을 할 수 있다.

이미지 최적화

• Image 컴포넌트를 통해 설정한 width, height값에 맞는 이미지를 불러와 불필요한 메모리 낭비를 방지한다.
• lazy-loading을 통해 뷰포트에 해당 이미지가 필요한 순간에 데이터를 불러오므로 로딩 시간을 개선할 수 있다.

개발자 경험

• Next.js에서 제공하는 파일시스템 기반 라우팅을 통해 좀 더 직관적으로 페이지 컴포넌트를 관리할 수 있다.
• 리다이렉트, 스타일링을 위한 환경 설정(Sass, CSS Modules, Tailwind 등)을 제공해 좋은 개발자 경험을 제공