Next.js 란?
React는 라이브러리, Next.js는 리액트의 프레임워크이다.
Next.js를 통해 얻는 가장 큰 장점?
- SEO(Search Engine Optimization)
- SSR(Server-Side Rendering)
=> SSR을 통한 SEO를 위해 Plain React대신 Next.js를 사용한다.
React vs Next.js
React는 기본적으로 CSR(Client Side Rendering)
웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에,
첫 로딩 시간도 오래걸리고 SEO(Search Engine Optimization)에 취약하다는 단점이 있다.
Next.js는 SSR(Server-Side Rendering)인 pre-reloading을 통해
미리 데이터가 렌더링된 페이지를 가져와 사용자에게 빠르고 원활한 경험을 제공
이러한 방법은 SEO에 이점 제공 => 페이지가 더욱 검색 엔진에 노출될 수 있도록 도움
pre-reloading은 SSR과 함께 사용될 뿐만 아니라 정적 사이트 생성 (Static-Site Generation, SSG)에도 적용됨
CSR vs SSR
그렇다면 Plain React와 Next.js의 가장 큰 차이점은 렌더링 방식의 차이(CSR/SSR)이다.
두가지의 장점과 단점을 알아보자
CSR(Client Side Rendering)
React.js는 CSR방식을 채택,
SPA로 하나의 페이지안에서 모든 데이터를 주고 받으며,
react-router-dom같은 라우팅 라이브러리를 사용해서 페이지 이동처럼 보이게 만들어준다.
그러나 실제 페이지가 이동하는것이 아닌,
URL이 변경될때 보여지는 컴포넌트가 달라지는것 뿐이다.
react에서는 유저가 웹에 방문하면 맨 처음 HTML을 받아오고 CSS와 자바스크립트를 불러와
웹을 동작시키면 이후에 우리가 react안에 작성해놓은 코드들이 동작하는 것이다.
CSR의 장점 : 초기 로딩 속도가 빠르고, 사용자와의 상호작용이 매끄러움
CSR의 단점 : 엔진 최적화(SEO)가 어려우며, 초기 로딩 시간이 김SSR(Server Side Rendering)
next.js는 미리 페이지(HTML을 여러개 생성)를 생성해놓는다.
그리고 클라이언트 요청 시 해당하는 URL의 HTML을 전달해준다.
SSR의 장점 : 검색 엔진 최적화(SEO), 초기 로딩 속도가 빠름
SSR의 단점 : 서버의 부담이 큼(서버에서 페이지를 렌더링), 사용자와의 상호작용이 불편할 수 있음더욱 많은 장점들
Next.js는 SSR과 SEO최적화 외에 다음과 같은 장점을 가지고 있다.
1. 코드 분할 (Code Splitting):
코드 분할을 자동으로 처리하여 페이지마다 필요한 부분만 로드
웹 애플리케이션의 성능을 향상
2. 페이지 기반 라우팅:
페이지 기반 라우팅 시스템을 제공하며, 페이지의 경로를 폴더 구조로 표현
라우팅을 직관적으로 관리
3. Client-Side Navigation:
컴포넌트를 사용하여 페이지 간의 빠른 전환 페이지를 리로딩하지 않고도 사용자 경험을 향상4. Built-in CSS:
CSS 스타일링을 간편하게 관리할 수 있으며, CSS 모듈과 함께 사용 가능
5. Image Optimization:
이미지 최적화를 통해 페이지 로딩 시간을 단축하고 성능 향상
6. API Routes:
서버리스 API 엔드포인트를 쉽게 생성하고 관리
7. SSR과 CSR 혼합 사용 가능:
SSR과 CSR을 조합하여 다양한 요구 사항에 대응
