Next.js 앱에서 AMP를 지원하는 이점과 단점에 대해 알아보기
AMP는 빠른 페이지 로드를 보장하는 웹 구성요소 프레임워크입니다. Next.js에는 AMP가 내장되어 있습니다.
학습 내용
이 가이드에서는 먼저 AMP가 빠른 페이지 로드를 보장하는 방법을 간략히 설명한 다음 Next.js 앱에서 AMP를 지원하는 다양한 방법을 설명하고 개발자에게 가장 적합한 접근 방식을 결정하는 데 도움을 줍니다.
이 가이드는 Next.js를 사용하기로 결정했지만 AMP를 지원할지 확실하지 않은 웹 개발자를 대상으로 합니다.
AMP가 빠른 페이지 로드를 보장하는 방법
AMP에는 속도를 보장하기 위한 두 가지 기본 전략이 있습니다.
- AMP HTML: 특정 최적화를 필수로 하고 느려짐을 유발하는 아키텍처 패턴을 금지하는 제한된 HTML 형식입니다. 최적화 및 제한사항에 관한 개요는 AMP 작동 방식을 참고하세요.
- AMP 캐시: Google 및 Bing과 같은 일부 검색엔진에서 사용하는 콘텐츠 캐시로, 사전 렌더링을 사용하여 페이지 로드 속도를 높입니다. 캐시의 이점과 단점에 대해 자세히 알아보려면 AMP 캐시가 존재하는 이유를 참고하고 AMP 페이지가 캐시에 저장되는 방식을 알아보려면 AMP 페이지가 캐시되는 방식을 참고하세요.
Next.js에서 AMP를 사용하는 방법
Next.js에서 AMP를 사용하는 방법에는 두 가지가 있습니다.
- 하이브리드 AMP 접근 방식을 사용하면 모든 Next.js 페이지의 AMP 버전을 함께 만들 수 있습니다.
- AMP 전용 접근 방식을 사용하면 페이지의 유일한 옵션으로 AMP를 설정할 수 있습니다.
Next.js는 일반적으로 React 프레임워크로 간주되지만 Next.js를 사용하여 AMP 페이지를 게재하는 경우 React 구성요소가 유효한 AMP 구성요소가 아니므로 더 이상 React 구성요소를 클라이언트 측에서 실행할 수 없다는 점에 유의해야 합니다. 즉, Next.js는 더 이상 React 프레임워크가 아니라 AMP 페이지를 생성하기 위한 서버 측 템플릿 엔진입니다.
하이브리드 AMP 또는 AMP 전용 접근 방식을 사용할지 결정하는 방법
로드 성능을 중요하게 생각한다면 AMP 전용 페이지를 사용하면 페이지가 빠르게 로드되고 빠르게 유지될 수 있습니다. 하지만 속도를 보장하기 위해 AMP는 페이지 속도가 느려지는 경우가 많은 특정 아키텍처 패턴과 HTML 요소를 금지합니다. 예를 들어 렌더링 차단 리소스가 페이지 로드 속도가 느려지는 일반적인 원인이므로 AMP는 맞춤 동기식 JavaScript를 허용하지 않습니다.
AMP 전용 접근 방식이 적합한지 파악하려면 모든 프런트엔드 코드를 AMP HTML로 표현할 수 있는지 확인해야 합니다.
- AMP 작동 방식을 읽고 AMP의 대략적인 아키텍처 제한사항과 필수 최적화를 알아보세요.
- HTML 태그를 읽고 AMP에서 허용하고 금지하는 HTML 태그를 확인하고, AMP 구성요소 카탈로그를 둘러보고 AMP 커뮤니티에서 일반적인 사용 사례를 해결하기 위해 빌드한 맞춤 구성요소를 확인하고, amp-script를 확인하여 맞춤 JavaScript를 사용하여 AMP에서 현재 지원하지 않는 기능을 구현하는 방법을 알아보세요.
페이지에 AMP 전용 접근 방식이 적합하지 않더라도 AMP HTML과 AMP 캐시의 빠른 속도가 보장되므로 가능하면 항상 AMP를 사용하는 것이 좋습니다. Next.js의 하이브리드 AMP 접근 방식은 AMP 페이지를 조건부로 게재하는 방법을 제공합니다. 하지만 각 페이지의 두 가지 버전을 유지해야 하므로 유지보수 비용이 더 많이 발생합니다.
결론
AMP는 속도를 높이는 패턴을 적용하고 속도를 느리게 하는 패턴을 금지하여 사이트가 빠르게 시작되고 빠르게 유지되도록 합니다. AMP HTML과 AMP 캐시는 AMP가 속도를 보장하는 두 가지 주요 방법입니다. 하지만 AMP를 채택하기 전에 AMP가 사이트의 모든 요구사항을 지원할 수 있는지 확인해야 합니다.