[React] Next.js의 정의와 장단점

 

Next.js란 ?

- React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크
- 특별한 설정 없이 SSR, SEO부터 Typescript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크

 

SSR - 서버 사이드 렌더링
- 서버 측에서 렌더링하여, 클라이언트 쪽으로 보내주는 것 요청이 올 때마다 해당하는 html 문서를 그때 그때 생성하여 반환
- ex) react

CSR - 클라이언트 사이드 렌더링
- 서버에서 데이터를 받아와, 클라이언트 환경에서 렌더링하여 브라우저 화면에 표시하는 것
- ex) next.js

 

Next.js의 작동 방식

1. 초기에 사용자가 서버에 페이지 접속을 요청하면, 기본적으로 서버 측에서 React 코드 실행
2. React.js를 서버 측에서 Pre-rendering 하여 html를 생성하고 브라우저에게 보냄
3. 그 후, 브라우저에서 React를 사용해 웹 페이지 완성

 

Next.js의 특징

1. 클라이언트 및 서버 랜더링
2. 중첩 라우팅
3. 데이터 가져오기
4. 내장된 최적화
5. 타입스크립트 지원
6. API 엔드 포인트를 구축하여 타사 서비스와 안전하게 연결하고 프론트엔드에서 사용 가능

 

 

Next.js의 장점

• 초기 로딩 속도가 빠르다
• Javascript로 모든 페이지를 구성하는 React와는 다르게, 서버 사이드 랜더링을 하게 되면 검색 엔진들이 HTML를 직접 검색할 수 있어 검색어 노출 즉 SEO(Search Engine Optimization)에 좋음
• HTML 파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능

 

Next.js의 단점

• 모든 요청에 대해 필요한 부분을 수정하는게 아닌 새로운 html 페이지를 내려주기 때문에 속도 저하 및 새로고침이 발생함
• 페이지를 요청할 때마다 새로고침되어 UX가 다소 떨어짐

 

 

 

---

 

 

 

Next.js 시작하기

먼저, cmd 창을 열고 npx create-next-app 입력

typescript 기반의 next.js 프로젝트를 생성하고 싶다면 npx creat-next-app --typescript 입력

그 후, 프로세스 흐름에 따라 프로젝트 이름 입력

npx creat-next-app

npx create-next-app --typescript

 

Next.js 서버 작동하기

// 프로젝트 폴더 들어간 후, 
npm run dev

 

http://localhost:3000/ 해당 url에 들어가면 실행된 react 사이트를 볼 수 있음.