본문으로 건너뛰기

next Script 태그

작성일 : 2024.12.20

Next.js의 next/script와 HTML의 일반 <script> 태그를 비교해드리겠습니다:

next/script​

next/script의 장점​

  1. 성능 최적화
  • 자동으로 스크립트 로딩을 최적화
  • strategy 옵션을 통한 로딩 우선순위 제어
  • 필요한 시점에 스크립트 로드 가능
  1. 자동 관리
  • 중복 스크립트 로드 방지
  • 올바른 로딩 순서 보장
  • hydration 문제 자동 처리
  1. 디버깅
  • 상세한 에러 메시지 제공
  • 로드 상태 추적 가능 (onLoad, onError, onReady)
  • Next.js 개발 도구와 통합

next/script의 단점​

  1. 유연성 제한
  • Next.js 프로젝트에서만 사용 가능
  • 일부 strategy는 특정 위치에서만 사용 가능
  1. 학습 곡선
  • Next.js의 특정 패턴 학습 필요
  • strategy 개념 이해 필요

일반 script 태그​

일반 script 태그의 장점​

  1. 단순성
  • 직관적이고 간단한 사용법
  • 웹 표준 기술
  • 프레임워크 독립적
  1. 완전한 제어
  • 로딩 타이밍 직접 제어 가능
  • 브라우저 기본 동작 활용
  • 즉시 실행 가능

일반 script 태그의 단점​

  1. 성능 관리
  • 수동으로 최적화 필요
  • 잘못된 사용시 성능 저하
  • 로딩 순서 수동 관리
  1. 에러 처리
  • 제한된 에러 정보
  • 디버깅이 어려울 수 있음
  1. SSR/SSG 호환성
  • Server-Side Rendering 관련 문제 발생 가능
  • hydration 문제 수동 처리 필요

사용 추천:​

  • Next.js 프로젝트: next/script 사용 권장
  • 단순한 정적 웹사이트: 일반 <script> 태그도 충분
  • 성능이 중요한 경우: next/script 사용 권장
  • 서드파티 스크립트 통합: next/script 사용 권장

결론적으로 Next.js 프로젝트에서는 next/script를 사용하는 것이 대부분의 경우 더 좋은 선택입니다. 성능 최적화와 에러 처리가 자동화되어 있고, Next.js의 SSR/SSG 기능과 잘 통합되기 때문입니다.