[Korean FE Article] Next.js 에서 HTML 페이로드 줄이기

글 링크: https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/reduce-html-payload-with-nextjs.md

소개

이 글에서는 Next.js를 사용할 때, HTML 크기가 커지는 문제와 아키텍처 개선을 통해 이를 해결한 사례에 대해 설명합니다.

보통 리소스 크기를 개선할 때는 자바스크립트나 이미지 크기에 주목하게 되는데요. 이 글에서는 다소 생소한 HTML 크기에 대해 다루고 있습니다. 저도 Next.js를 사용할 때 HTML이 과도하게 커지는 문제를 겪었는데요. 이에 대한 해결책을 찾던 중 발견해 도움을 받은 글입니다. 비슷한 문제를 겪는 분이 있다면 이 글이 도움이 되었으면 좋겠습니다.

목차

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

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

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

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

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

• 아키텍처 변경

• 데이터 흐름 예제

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

• 결론

• 성능 효과

• 계층화 해결책