📌React보다 Next.js를 선호하는 이유
-
렌더링 방식의 차이 - CSR(Client Side Rendering) vs SSR(Server Side Rendering)
React는 CSR 방식이기 때문에 js파일이 로드된 후에 페이지 정보가 보여지므로 첫 페이지 로딩이 오래 걸리므로 유저 이탈 가능성이 있으며, 로드 전까지 유저는 흰 화면만 보게 된다.
또한 html이 아닌 js파일로 처리하므로 SEO(검색엔진 최적화) 측면에서도 좋지 않다.
반면, Next.js는 SSR 방식으로 작동하는데 앞서 설명한 내용과 반대되는 개념으로 서버에서 페이지를 미리 렌더링하여 클라이언트로 보내주는 방식으로 정보가 html로 작성되어 SEO 측면에서 매우 유리하며, 첫 페이지 로딩시간이 단축된다. -
간편한 페이지 전환 방식
React의 경우 페이지 전환을 위해 router 패키지를 다운로드하고 최상위 파일에서 Routes태그로 하위 태그를 감싼 후 각 Route태그 마다 path를 지정하는 방식이 사용되어 다소 번거로운 점이 있었는데 Next.js에서는 pages폴더에 생성한 js파일(폴더)명을 페이지 url로 인식하므로 정말 간단하게 페이지 전환을 구현할 수 있다. -
서버 컴포넌트 & 클라이언트 컴포넌트
Next.js에서는 컴포넌트를 서버, 클라이언트 2가지 형태로 구분하여 사용할 수 있다.
기존 React에서처럼 js기능을 사용하기 위해선 클라이언트 컴포넌트를 사용해야 하고 단순히 데이터를 뿌려주기만 하는 컴포넌트는 서버 컴포넌트를 사용하여 로딩속도를 개선하고, 검색노출을 증가시키므로 SEO 측면도 개선된다.
(클라이언트 컴포넌트를 사용할 때는 최상단에 'use client'를 입력해야 한다.)
🔥Next.js 시작하기
1. 프로젝트 생성
터미널에 npx create-next-app@latest 입력 후 사용여부를 선택 및 프로젝트명 지정
2. pages폴더의 index.js 찾기
pages폴더의 index.js가 가장 최상위 파일이다.
3. 반복 되는 코드는 components 폴더에 분리하여 작성하고 import 해서 사용하기
ex) 헤더, 푸터, 네비게이션바, 레이아웃, SEO 파일 등
4. styled-jsx 방식으로 페이지 스타일 적용
Next.js에서만 사용 가능한 스타일링 방식이며, 컴파일 시 고유한 클래스명으로 변경되므로 클래스명을 지을 때 고민하지 않아도 된다.
5. getServerSideProps() 상황에 맞게 사용하기
페이지에서 내에서 getServerSideProps() 함수 내에서 작성한 코드는 모두 서버단에서 실행되므로 클라이언트에 노출될 우려가 없으므로 상황에 맞게 활용하자.
