[React] Next.js 프레임워크의 정의와 장단점

Next.js란 ? 

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

SSR (서버 사이드 렌더링)

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

CSR (클라이언트 사이드 렌더링)

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

 

Next.js의 작동 방식

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

 

특징과 장단점

특징

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

장점

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

단점

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

 

---

 

Next.js 시작하기

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 사이트를 볼 수 있음 !! 끝 !