Next.js에서 HTML 페이로드 줄이기 (사례 연구)

원문: https://www.smashingmagazine.com/2021/05/reduce-data-sent-client-nextjs/

이 글은 Bookaway의 랜딩 페이지 성능에 대한 사례 연구를 다룹니다. Next.js 페이지로 전달되는 props를 어떻게 관리해서 로딩 시간과 웹 바이탈을 향상할 수 있었는지 알아보겠습니다.

• HTML 크기가 너무 크다는 것을 어떻게 알게 되었는지
• 어떻게 그 크기를 줄였는지
• 이 과정의 이점(예시로 아키텍처 개선, 코드 구성 개선, 구글이 수만 개의 랜딩 페이지를 인덱싱할 수 있도록 올바른 작업 제공, 클라이언트에 더 적은 바이트를 제공 - 특히 연결 속도가 느린 사용자에게 적합).

왜 속도 개선이 SEO에 필요할까요?

“Largest Contentful Paint(LCP)는 페이지 로드 타임라인 중 페이지의 메인 콘텐츠가 로드된 시점을 나타내므로 사용자가 체감하는 로드 속도를 측정할 수 있는 중요한 사용자 중심 지표입니다. - LCP가 빠르면 사용자가 해당 페이지가 유용할거라고 인지하는 데 도움이 됩니다.”

“웹은 사용할 수 있는 모든 URL을 탐색하고 인덱싱하는 구글의 능력을 초과하는 거의 무한한 공간입니다. 따라서 구글 봇이 어떤 사이트를 탐색하는 데 사용할 수 있는 시간에 한계가 있습니다. 사이트를 탐색하기 위한 구글의 시간과 자원의 양은 사이트의 크롤링 예산이라고 불립니다.” - "Advanced SEO", 구글 검색 센터 문서

Q: “사이트 속도가 크롤링 예산에 영향을 줍니까? 에러는 어떤가요?”A: “사이트를 더 빠르게 만들면 사용자 경험이 개선되는 동시에 크롤링 속도도 향상됩니다. 구글봇에게 있어 빠른 사이트는 서버 상태가 양호하다는 신호이고 동일한 수의 접속으로 더 많은 콘텐츠를 가져올 수 있습니다.”

리액트 Hydration: 왜 HTML에 JSON이 있나요?

1. 요청이 서버에 도착하면 - 데이터 컬렉션을 바탕으로 HTML을 생성해야 합니다. 데이터 컬렉션은 getServerSideProps를 통해 반환된 객체입니다.
2. 리액트가 데이터를 전달받습니다. 이제 서버에서 작동하기 시작합니다. HTML을 생성하고 전송합니다.
3. 클라이언트가 HTML을 전달받으면, 즉시 눈앞에 그려집니다. 그동안, 리액트 자바스크립트가 다운로드 되고 실행 됩니다.
4. 자바스크립트 다운로드가 끝나면, 리액트가 클라이언트에서 다시 실행 됩니다. HTML을 다시 생성하고 이벤트 리스너를 부착합니다. 이 과정을 hydration이라고 합니다.
5. 리액트가 hydration 처리를 위해 HTML을 다시 생성할 때, 서버에서 사용되는 것과 동일한 데이터 컬렉션이 필요합니다(1. 참고).
6. 이 데이터 컬렉션은 id가 __NEXT_DATA__인 스크립트 태그 안에 JSON을 삽입해 사용될 수 있게 됩니다.

정확히 어떤 페이지에 관해 이야기하고 있나요?

1. A 도시에서 B 도시A 도시 역에서 B 도시 역까지 이어져 있는 모든 노선.(예: 방콕에서 파타야까지)
2. 도시특정 도시를 지나는 모든 노선.(예: 칸쿤)
3. 나라특정 나라를 지나는 모든 노선.(예: 이탈리아)
4. 역특정 역을 지나는 모든 노선.(예: 하노이 공항)

이제, 아키텍처에 대해 살펴보겠습니다.

프로세스 핵심 사항

1. 요청이 getInitialProps 함수에 도달합니다. 이 함수는 서버에서 실행됩니다. 페이지를 구성하는데 필요한 데이터를 가져오는 것이 이 함수의 역할입니다.
2. REST 서버에서 반환된 정제되지 않은 데이터가 그대로 리액트에 전달됩니다.
3. 먼저, 서버에서 실행됩니다. 집계되지 않은 데이터가 리액트로 전송되었으므로 리액트는 UI 컴포넌트에서 사용할 수 있는 데이터로 집계하는 역할도 담당합니다(자세한 내용은 다음 섹션 참조)
4. HTML이 정제되지 않은 데이터와 함께 클라이언트로 전송됩니다. 그런 다음 리액트는 클라이언트에서도 동일한 작업을 수행하기 위해 다시 시작합니다. hydration이 필요하기 때문입니다(자세한 내용은 다음 섹션 참조). 따라서 리액트는 데이터 집계 작업을 두 번 수행합니다.

문제점

<script id="__NEXT_DATA__" type="application/json">
// 큰 JSON
</script>

copy($('#__NEXT_DATA__').innerHTML)

왜 이렇게 클까요? 여기에 무엇이 담겨 있나요?

1. 데이터가 집계되지 않았습니다.HTML에는 세분화된 제품의 전체 목록이 포함되어 있습니다. 그것들은 화면에 그릴 때 필요한 것은 아닙니다. 집계 방법을 위해 필요한 것들입니다. 예를 들어, 이 역을 통과하는 모든 노선의 목록을 가져오고 있습니다. 각 노선에는 공급업체가 있습니다. 하지만 노선 목록을 2개의 공급자로 구성된 배열로 줄여야 합니다. 나중에 예시를 보겠습니다.
2. 불필요한 필드들각각의 객체를 파헤쳐 보면, 우리가 전혀 필요하지 않은 몇몇 필드를 발견했습니다. 이는 우리가 REST API에서 데이터를 가져오기 때문입니다. 어떤 데이터를 가져오는지 제어할 수 없습니다.

아키텍처 변경

1. 중복 데이터 집계가 제거되고 Next.js 서버에서 한 번만 수행되도록 통합되었습니다.
2. Graphql 서버 계층이 추가되었습니다. 이는 우리가 원하는 필드만 얻을 수 있도록 해줍니다. 데이터베이스는 각 엔티티에 대해 더 많은 필드를 사용하여 확장할 수 있지만, 더 이상 영향을 미치지는 않습니다.
3. PageLogic 함수가 getServerSideProps에 추가되었습니다. 이 함수는 백엔드 서비스에서 집계되지 않은 데이터를 가져옵니다. 이 기능은 UI 구성요소에 대한 데이터를 집계하고 준비합니다.(서버에서만 실행됩니다).

데이터 흐름 예제

[
  {
    id: "58a8bd82b4869b00063b22d2",
    class: "Standard",
    supplier: "Hyatt-Mosciski",
    type: "bus",
  },
  {
    id: "58f5e40da02e97f000888e07a",
    class: "Luxury",
    supplier: "Hyatt-Mosciski",
    type: "bus",
  },
  {
    id: "58f5e4a0a02e97f000325e3a",
    class: "Luxury",
    supplier: "Jones Ltd",
    type: "minivan",
  },
];

[
  {
    supplier: "Hyatt-Mosciski",
    type: "bus",
  },
  {
    supplier: "Hyatt-Mosciski",
    type: "bus",
  },
  {
    supplier: "Jones Ltd",
    type: "minivan",
  },
];

[
  { supplier: "Hyatt-Mosciski", amountOfLines: 2, types: ["bus"] },
  { supplier: "Jones Ltd", amountOfLines: 1, types: ["minivan"] },
];

변화의 효과를 측정하는 방법

결론

“네트워크와 브라우저의 발전 덕분에 (기기는 아니지만) "현대적인" 방식으로 구축된 사이트에 대해 글로벌 예산 상한선이 더 관대해졌습니다. 우리는 이제 ~100KiB의 HTML/CSS/폰트와 ~300-350KiB의 JS(gziped)를 사용할 여유가 있습니다. 이 주먹구구식의 제한은 적어도 1~2년은 유지되어야 합니다. 항상 그렇듯이, 악마는 디테일에 있지만, 가장 중요한 것은 변하지 않았습니다. 우리가 최고 장치의 한계까지 디지털 세상을 구축하면, 전 세계 사용자의 80% 이상은 사용하기 어려워집니다.”

성능 효과

계층화 해결책

• Graphql 서버: 우리가 원하는 것만 정확하게 가져오도록 도와줍니다.
• 집계 전용 함수: 서버에서만 실행됩니다.

1. 이제 데이터 축소 및 집계에 관한 모든 처리가 단일 기능으로 중앙 집중화됩니다
2. UI 기능은 이제 훨씬 더 간단합니다. 집계나 데이터 처리를 하지 않습니다. 단지 데이터를 얻어서 그리기만 합니다.
3. 서버 코드 디버깅은 REST 엔드 포인트에서 불필요한 필드를 생성하지 않고 필요한 데이터만 추출하므로 더 쾌적합니다.