chapter.10 SEO와 성능 관리
Nextjs는 seo 점수를 향상 시키기 위해 많은 개선이 되어왔음.
SEO와 성능 >> 프론트엔드 혁신 이후 너무 복잡해짐
- Nextjs는 페이지 전체를 정적으로 만들어서 SEO점수를 높인다.
- 페이지를 서버와 클라이언트 중 어떤 방식으로 렌더링할 지 정할 수 있다.
- 동적으로 렌더링을 진행하면 SEO 점수가 낮아짐 (서버에서 렌더링하면 높아짐)
- 따라서 렌더링 방식을 잘 정해야한다.
방법
-
서버가 렌더링
: SEO 점수를 높이기 유리한 콘텐츠들은 서버가 렌더링하고 나머지는 클라이언트에서 하도록 만들 수 있음 .보안 상으로도 좋다.
단점은 서버가 렌더링하게 되면 서버를 준비하고 유지 보수 해야하며 트래픽이 늘어날 수록 서버는 느려지고 비용이 증가한다.
(클라이언트는 렌더링시 번들 파일만 만들어서 제공하면 된다.)
- 전체 사이트를 정적 사이트로 만드는 것
컨텐츠가 바뀔 때 다시 빌드해야하는 단점 (시간이 오래 걸린다.)
- 서버가 렌더링할지 (SSG)
- 빌드 시점에 정적으로 만들지(SSR)
- 전적으로 클라이언트에서 렌더링할지 (CSR)
렌더링 방식 선택 예시 : 사진 세부사항 페이지
- ssg, ssr 중 하나 선택
- ssg의 장단점
- isr(정적 증분 재성성을 통해 30분마다 재실행 가능)
- 비용감소 및 빌드 시점에 만든 정적 페이지 리렌더링 불필요
- 성능이 가장 뛰어남
- seo에 영향이 크지않은 콘텐츠는 클라이언트가 렌더링하도록 할 수 있음 .
- ssr 장단점
- 콘텐츠를 변경하는 경우 , ssg와 달리 기다릴 필요가 없음
- ssg와 달리 빌드 시간이 짧아 배포까지의 시간이 길지않다.
- ex. 인기 top 100은 정적 기법, 나머지는 동적으로 생성하도록
프라이빗 라우트
- 아무나 접근할 수 없는 페이지
- 보안에 신경써야함 (seo 적용 x >> 보통 ssr로 권한 없으면 리다이렉션 시킴)
SEO 다루기
- seo 친화적인 라우팅 구조
- 페이지에서 정확한 메타데이터 제공
- 이미지 최적화 (이것도 seo 점수에 반영이 된다.)
- 적절한 사이트맵 생성 (사이트맵을 잘 만들면 seo 점수가 높아짐)
- 올바른 html 태그 사용
성능 다루기 (reportWebVitals 를 이용한 성능 측정)
- 최대 콘텐츠풀 페인트(LCP)
- 최초입력지연(fid)
- 누적 레이아웃 이동
chapter.11 배포 플랫폼
성능에 적합한 배포 플랫폼을 고르는 방법
- 어디에 어떻게 배포할지가 관건
- vercel에 배포하기
- 정적 사이트와 프런트엔드 프레임워크만을 위해 만들어짐 (node 사용x)
- 서버리스 펑션을 사용해 ssr 페이지를 지원한다.
(함수로써 관리형 인프라에서 호출할 수 있는 것을 의미) - github와 연결해서 사용
- cdn에 배포하기
- aws , azure, cloudflare
- 데이터 센터가 지리적으로 분산되어 있다. (즉, 성능이 좋다는 말)
- 정적 파일들을 모든 지역에 복제해 사용자와 가장 가까운 곳에서 제공되도록 한다.
다음 링크와 같은 형태로 서버리스 형태로 배포가 가능하다.
https://github.com/serverless-nextjs/serverless-next.js
- ssr페이지와 api경로는 aws lambda로 배포되고 서비스됨 (서버리스 펑션)
- 정적페이지나 클라이언트 측 자원, 퍼플릭 파일들은 s3로 배포되고 cloudfront로 서비스됨
cdn 서비스 제공 조건
- nodejs 실행 환경 구성
- 프로세스 관리 설정
- 리버스 프록시 사용
- 방화벽 규칙 설정
- 효율적인 개발 파이프라인 구성
- 도커에서 실행
FE 개발자다?