Chapter 1 - 3
CHAPTER 1 - NEXT JS?
Next js 배경
- 리액트로는 불가능한 SSR, SSG, ISR 과 같은 기능 사용을 위함
- 리액트는 csr > 클라이언트에서 실행되어 seo 효과를 볼수 없음
- 이에 해결책으로 Next js는 html 페이지로 미리 렌더링해 즉각 표시 할 수 있도록 하는 방식을 개발
React와의 차이점
Next js는 서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 nodejs에서 실행되기 때문에
fetch, window, document 같은 웹 브라우저 자체 제공 객체나 canvas 같은 html 요소에 접근할 수 없음 .
(대신 node에서 사용가능한 라이브러리나 api를 사용하려는 경우 서버 사이드 코드를 통해 코드를 처리하는 방식으로 지원함)
대표적 기능
- 코드 분할
- 서버사이드 렌더링 (SSR)
- 파일기반 라우팅
- 경로 기반 프리페칭
- 렌더링 방식 선택 가능
- (정적 사이트 생성, 증분 정적 콘텐츠 생성, ts 지원, 자동 폴리필 적용, 이미지 최적화, 성능 분석, 웹 앱 국제화 지원)
특징
Next js는 필요에 따라 클라이언트 컴포넌트를 만들수도 서버 사이드 컴포넌트를 만들 수도 있다.- SSR은 API가 업데이트 될 때마다 요청할 수 있어 속도가 조금 느리지만 클라이언트 컴포넌트처럼 쓸 수 있는 장점이 있고 SSG는 완전 정적 페이지를 만들때 유리함 , 굉장히 빠르다
Next js는 웹팩을 사용해 번들화를 시키기 때문에SASS나 전처리기를 사용하는 CSS 프레임 워크들은 웹팩설정이 추가적으로 필요하다. (ex .emotion)
Next js 이외의 SSR 프레임워크
1. GATSBY
: SSR을 지원하는 다른 프레임 워크
이 프레임워크는 정적 사이트 생성만 지원하지만 기능 좋음
단, 동적 서버 사이드 렌더링을 지원하지않음 .
2. NustJS
Vue js 기반 프레임워크
설정 파일에서 레이아웃, 전역 플러그인, 컴포넌트 , 라우트 등을 지정할 수 있음 .
(Next는 React와 설정을 동일하게 들고감)
3. Angular Universal
Angular 기반 프레임워크 (구글에서 만들었다.)
CHAPTER 2 - 렌더링 전략
SSR - 서버 사이드 렌더링
- 실행 시점에 동적으로 제공 (코드 동적 렌더링)
- 각 페이지 별로 렌더링 방식을 정할 수 있다.
- 따라서 동적 작업 시(API 호출이나 DB접근) 해당 함수를 페이지에서 export 해야한다.
- 특정 컴포넌트를 CSR로 생성
- 빌드 시점에 정적 페이지 생성 가능
- 증분 정적 재생성(ISR)으로 정적 페이지 재생성하는 방법
- 하이드레이션 : 서버에서 렌더링한 페이지에 스크립트 코드를 넣어 동적 처리
SSR 장점
- 안전하다 : (쿠키, API, 데이터 검증 등 주요 작업을 서버에서 처리함 )
- 뛰어난 호환성 : 클라이언트 환경이 js를 사용 못해도 서버에서 처리시켜버림
- 뛰어난 SEO
SSR 단점
- 더 많은 자원 소모 및 부하 , 유지보수가 필요하다 .
- 요청 처리 시간이 길어짐
- 외부 API 사용 경우 렌더링 마다 재요청 함
getServerSideProps()
- Next js 는 서버가 페이지 요청 처리할 떄 이 함수를 익스포트하는 페이지를 찾아 먼저 호출 시킨다.
- 이 함수가 반환하는 props는 컴포넌트로 전달 되어 서버와 클라이언트 모두가 사용이 가능하다.
- 즉, 외부 API를 처리하고 필요한 데이터를 가져온 다음 서버에서 동적으로 해당 페이지를 렌더링 한다.
CSR - 클라이언트 사이드 렌더링
1. useEffect, useState를 사용한 CSR 이용
- 컴포넌트가 마운트 된 후에 해당 기능을 실행할 수 있도록 한다.
- 즉, 해당 훅 사용시 특정 작업을 클라이언트에서 실행하도록 강제할 수 있음
- 클라이언트 상의 작업이 필요할 때 이 방법을 통해 클라이언트 컴포넌트로 만들 수 있음 (useState 까지 사용하면 확실하게 만들 수 있음) 아래 방식 참고
2. process.browser 변수를 활용하는 방법 || typeof window
- process.browser 해당 값은 코드를 클라이언트에서 실행하면 true, 서버면 false 값을 가짐
- typeof window undefined 면 서버 아니면 클라이언트
정적 사이트 생성 (SSG)
SSG 장점
- 빌드시점에 미리 렌더링해 페이지를 요청해도 클라이언트나 서버가 추가 처리할 필요가 없다
- 미리 렌더링 되어 있기 때문에 api나 데이터 접근이 없어 안전하다.
- 높은 확장성
SSG 단점
- 다음 배포전까지 사이트 수정이 불가능
증분 정적 재생성 (ISR)
- 주기를 정해놓고 정적 페이지를 다시 렌더링하고 해당 내용을 업데이트 할 지 정할 수 있는 기능이다.(단점 해결)
getStaticProps함수는 데이터를 특정 주기 기준으로 캐싱해둠으로써 동적 제공이 필요한 정적페이지를 만들 수 있도록 도와준다.
정리
- 페이지를 빌드 시점에 정적 페이지로 만들지 (ssg)
- 페이지 요청 시점에 만들지(ssr)를 정할 수 있다.
- ssg와 isr 기법을 사용하면 ssr과 ssg를 함께 사용할 수 있다.
CHAPTER 3 - Next js 내장 컴포넌트
NextJS 동적 메타 데이터 관리
-
Next js는 SSR만 제공하는 프레임워크가 아니다.
-
SSR 이외의 내장 컴포넌트와 함수를 제공해 성능이 뛰어난 동적 웹 사이트를 쉽게 만들 수 있습니다 .
ex . 라우팅 시스템, 네비게이션, 이미지 최적화, 메타데이터 처리 등
1. 라우팅 시스템
A. 페이지 내에서 경로 매개변수를 가져온 경우
-
React Router같은 것들은 클라이언트 라우팅만 구현할 수 있다 . -
서버 사이드 렌더링은 개입하지 않습니다.
-
Next js는 파일시스템 기반 페이지 라우팅을 사용한다. -
[slug]는 경로 매개변수로 사용자가 브라우저 주소창에 입력하는 모든 값을 가질 수 있다.
동적 라우팅 규칙 : 디렉토리 안에 [slug].js 파일을 생성한다.
getServerSideProps({params})에서 params로
넘어오는 변수의 값이 [ ], 즉 경로 매개변수로 들어오는 값과 일치하는 것 같다.
B. 페이지가 아닌 컴포넌트 안에서 경로 매개변수의 값을 가져오는 경우(리액트의 훅인 useRouter 로 가능하다.)
리액트 훅은 리액트 상태나 함수형 컴포의 라이프 사이클을 다룰 수 있다.
2. 네비게이션
클라이언트에서 네비게이션 처리함 a 태그를 이용한 네비게이션 처리
Link는 미리 페이지를 불러올 수 있다. (preload를 통해 조작가능)
a, Link 와 달리 router.push를 통해서도 네비게이션 기능 가능
router.push는 네비 구현에 사용하기보다는 이벤트나 특정 상황이 발생했을 때만 사용하는 것이 좋다.
3. 정적 자원 제공
/Public 디렉토리 안에 있는 파일들을 의미한다. (css나 js 같은 동적 파일 제외)
특정 정적 파일들은 seo에 영향을 미침
최적화되지않은 이미지 (누적 레이아웃 이동 = cls현상 발생)
이미지 로딩 전후의 ux가 다름1. nextjs 는 image 컴포넌트를 사용해서 이미지를 자동으로 최적화할 수 있다.
(단 next.config.js 파일에 설정을 추가해야함)
2. 외부 서비스를 통한 최적화
config 파일에 loader 추가해서 사용 (ex. akamai, imgix, cloudinary)
단 , vercel로 배포하는 경우는 loader가 필요없다.
주의점
별도 이미지 최적화 서버를 이용하면 고유 api가 있기 때문에 주의 해야함
3. 메타데이터
Head 컴포넌트를 통해 메타데이터를 동적으로 다룰수 있게 해준다.
4. app.js, document.js
__app.js
공통 레이아웃 처리 , 페이지 컴포넌트 렌더링 수정 가능
__document.js
html 태그 커스터마이징 (html, head, main, nextscript) 네가지는 필수
