Young Log

https://www.htmhell.dev/adventcalendar/2025/27/

해당 내용에서 정독 후 알아본 내용이다.
요즘 깊게 파고 있는 SEO와 관련이 있다.

결론은 사용자 경험 (속도)와 검색 엔진 때문인데,
개발자들 사이에서는 자바스크립트는 비용이 비싸다고 표현한다고 한다.

JS는 브라우저를 일하게 만든다.

이전에 정리한 SSR, CSR 내용과 관련이 있다.

HTML: 브라우저가 읽자마자 바로 화면에 그려진다.
JS: 브라우저가 파일을 다운로드 → 코드 해석(Parsing) → 실행(Execution)할 때까지 화면이 없다.

문제는 JS 파일이 커질수록 사용자는 하얀 화면만(LCP 지연)만 보게 될 것이고,
특히 낮은 사양에서는 JS 해석 속도가 많이 느려져서 사용자가 금방 떠나버릴 것임(특히 성질 급한 한국인은..ㅎㅎ)
그리고 우리의 글을 인덱싱하러 온 구글 봇도 기다려 주지 않을 것이다!

HTML로 바꿔야 하는 진짜 이유

Next.js 같은 프레임워크가 지금 계속 발전하는 이유이기도 한데,
최대한 HTML로 쓰여지기 위함.

초기 로딩 속도(FCP) 빨라진다.
안정성: 네트워크 상태가 안좋은 경우 JS는 못 불러와도 HTML은 이미 와 있어서 최소한의 내용을 보여줄 수 있다.
에너지 효율: 사용자의 기기(배터리, CPU)를 덜 쓰게 만든다.

Next.js 에서 어떻게 활용하는지?

무작정 Next.js 사용하기만 해서 자동으로 적용되는 건 아니다!
Next.js를 잘 활용한다면 자바스크립트가 할 일을 최대한 서버(빌드 타임)로 넘겨서 브라우저는 HTML만 던져주게 하는 것.

Server Component를 기본으로 사용하기

Next.js 13 버전 부터는 기본적으로 모든 컴포넌트가 서버 컴포넌트이다.
- 최대한 데이터 패칭을 서버 컴포넌트에서 수행하기
- 브라우저가 자바스크립트를 다운로드해서 데이터를 불러오는 것이 아니라, 서버가 이미 데이터를 다 채운 HTML을 보내주게 한다.
“use client” 는 꼭꼭! 필요한 곳에만 쓰기

이전 글에서도 “use client”를 남발하면 안되는 이유를 정리한 적이 있다.
버튼 클릭, 입력창 입력, 애니메이션 등의 사용자의 인터렉션이 필요한 부분에만 붙여주기. → 클라이언트 컴포넌트로 만들기.

페이지 전체를 “use client” 감싸지 말고, 필요한 버튼 하나만 별도의 컴포넌트로(Client component)로 분리해서 쓰고,
나머지 본문은 전체 순수 HTML로 배포되도록 하기.

getStaticProps 대신 SSG/ISR 전략 선택 (App Router 기준)

블로그 글처럼 자주 안 바뀌는 데이터는 Static Rendering 로 두기. → 그럼 엄청 빨라짐!
**next/image**와 next/font 활용하기

자바스크립트로 이미지 크기를 계산하는게 아니라 Next.js가 HTML 단계에서 srcset을 생성해 브라우저에게 최적의 이미지 크기를 알려준다.
폰트 로딩 때문에 화면이 깜박이는 현상(Layout Shift)을 JS 없이 HTML/CSS 단계에서 해결해 준다.

결론

use client 남발 금지, 디폴트로 서버 컴포넌트로 쓰기