반응형
섹션 12: Next.js 소개
Next.js
- Vercel이 개발한 오픈소스 자바스크립트 프레임워크
- 기존의 리액트가 제공하지 않던 추가적인 기능을 이용할 수 있게 해준다. 👉 React.js의 확장판
- 다양한 기능을 제공함 👉 폴더 구조 기반의 페이지 라우팅 / 이미지, 글꼴, 스크립트 최적화 / 서버 사이드 렌더링 / 기타 등등...
프레임워크 vs 라이브러리
따라서, Next.js와 React는 다음과 같은 차이를 가진다.
- Next.js: 자유도 낮음, 많은 기능이 제공됨 👉 탈 것(특화된 기능이 있고 해당 기능과 연관된 기능도 함께 제공. 정해진 용도로만 활용이 가능함)
- React: 자유도 높음, 대다수의 기능 제공 안 됨 👉 도구(특화된 기능이 있으나 그 외의 기능은 제공하지 않음. 사용자가 원하는 용도로 사용 가능)
SSR (Server Side Rendering) + CSR (Client Side Rendering)
SEO(Search Engine Optimization)
- SEO: 구글, 네이버, 다음 등 검색 포털 서비스의 검색 결과에 더 잘 노출되게 하는 것
- 구글을 제외한 나머지 검색 엔진이 특정 웹페이지 정보 수집 시, 단순히 처음에 받은 html 파일의 정보만 수집함.
- CSR (리액트)을 이용하면, 첫 번째 요청 시 빈 껍데기(아무 정보도 담기지 않은 html 파일)만 반환한다. 따라서 검색 엔진이 제대로 된 페이지의 정보를 수집할 수 없게 되며, 검색 엔진에 웹페이지가 잘 노출되지 않는다.
- SSR (Next.js) 사용 시 비교적 정보가 잘 수집되어, SEO 성능을 향상시킬 수 있다.
Next.js 앱 생성하기
npx create-next-app@latest .
앱 실행
npm run dev
출처
https://kmooc.udemy.com/course/react-next-master/learn/lecture/39610746
반응형