SEO와 성능
렌더링 전략
- 만들고자 하는 웹 사이트나 웹 애플리케이션의 성격에 따라 달라야함
- 클라이언트 사이드 렌더링 (CSR)
- 애플리케이션은 하나의 자바스크립트 번들 형태로 배포되며 웹 브라우저가 자바스크립트 번들 전체를 다운로드한 후 코드를 실행해서 HTML 콘텐츠를 동적으로 생성
- 렌더링과 관련된 모든 연산이 클라이언트에서 이루어지므로 성능이 좋고 사용자 경험도 좋음
- 단점: 검색 엔진 봇이 애플리케이션을 렌더링하고 분석하기 어려워서 SEO 점수는 낮아짐
- 서버 사이드 렌더링 (SSR)
- SEO 점수를 높이기에 유리한 콘텐츠들은 전부 서버가 렌더링하고 나머지는 클라이언트에서 렌더링하도록 만들 수 있음
- 서버가 데이터를 불러오고 검사하기 때문에 민감한 API 호출 등을 숨길 수 있어 보안 측면에서 더욱 안전함
- 단점: 서버를 준비하고 유지 및 보수해야하며 트래픽이 늘어날 수록 비용 증가하고 서버가 느려짐
- 정적 사이트 재생성 (SSG)
- 전체 웹 사이트를 정적 사이트로 만드는 것
- 가장 성능이 뛰어나고 SEO 점수가 눈에 띄게 향상됨
- SEO 점수에 영향을 미치는 콘텐츠가 자주 바뀐다면 한 시간에도 몇번씩 전체 웹 사이트를 다시 빌드해야함
- 민감한 API 호출이나 연산 등이 클라이언트에서만 이루어지므로 보안에 악영향 줄 수 있음
실제 웹 사이트 예시
- 사진 목록을 생성하고 전송하는 API가 충분히 빠르고 이미지가 잘 최적화되어있다면 전체 사진 목록을 서버가 렌더링
→ 그렇지 않다면 클라 쪽에서 API 호출하여 사진 목록이 클라에서 도달하기 전까지 사용자에게 표시될 콘텐츠 페이지를 예쁘게 만들어서 제공 - 전체 페이지는 정적(SSG)으로 만들어서 리액트 하이드레이션을 통해 API 호출, 내장 이미지 컴포넌트를 사용하여 최적화된 이미지 만들기(CSR)
동적 페이지에 SSG 사용 시
- 장점
- 빌드 시점에 만든 정적페이지의 경우 각 요청별로 서버가 다시 렌더링할 필요 없음. 서버에 가해지는 부하 줄어들고 인프라에 드는 비용 감소. 웹사이트의 부하가 증가하는 경우에도 더 효율적으로 확장할 수 있음
- 페이지 성능 가장 뛰어남
- 정적 콘텐츠 변경될 경우 정적 증분 재생성을 주기적으로 실행하여 페이지 다시 만들도록 할 수 있음
- SEO 점수에 크게 영향을 주지 않는 답글이나 좋아요 수 등 동적 콘텐츠는 클라이언트가 데이터를 불러와서 렌더링할 수 있음
- 단점
- 페이지 수가 많을수록 빌드 시간 길어짐
동적 페이지에 SSG 사용 시
- 장점
- 새로운 정보를 추가하거나 변경하는 즉시 웹 페이지가 해당 수정사항을 반영하고 표시함
- 요청한 페이지를 그때그때 렌더링하기 때문에 페이지 빌드 시간이 짧아지며 배포에 소요되는 시간이 단축됨
- 수천장의 사진이 업로드되는 페이지의 경우 SSR이 적합하다
프라이빗 라우트
- 프라이빗 페이지: 아무나 접근할 수 없는 페이지
- SSR을 사용하여 익명의 사용자가 접근했는지 탐지하고 권한이 없는 상탠라면 리다이렉트, 로그인한 사용자면 getServerSideProps를 통해 데이터를 미리 불러오고 다음 클라이언트로 안전하게 전송
렌더링 전략 정리
홈페이지
- 이미지 목록을 제외한 모든 페이지 정적으로 생성
- 이미지 목록은 사용자가 탐색한 결과에 따라 클라이언트에서 렌더링
사진 세부 정보 페이지
- SSR을 사용하면 SEO 점수 향상, 특히 사진이 아주 많은 경우 웹 사이트 자원을 효율적으로 확장할 수 있음
- 인기 있는 페이지는 SSG로 미리 정적 페이지로 만들어두고, 그렇지 않은 경우 실행 시간 동안 요청이 있을 때 정적 페이지를 만드는 방식
프라이빗 페이지
- 로그인한 상태인지 검사하기 위해 SSR을 사용
- 서버가 필요한 프라이빗 데이터를 모두 불러와서 처리한 후 클라이언트에 제공하기 때문에 API 호출을 숨길 수 있다
SEO 다루기
- 봇은 오직 웹 사이트의 콘텐츠와 품질만 봄
- SEO 친화적인 라우팅 구조
- 정확하고 완성된 메타데이터 제공
- 이미지 최적화
- 적절한 사이트맵
- 올바른 HTML 태그 사용
성능 다루기
- Next.js의 reportWebVitals 함수 제공하여 성능 측정에 중요한 정보 수집
- 최대 콘텐츠풀 페인트 (LCP): 2.5초 이내에 이루어져야함
- 최초 입력 지연 (FID): 0.1초 이내 상태 도달해야함
- 누적 레이아웃 이동
- Vercel 분석 대시보드 제공
