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 전용 페이지를 사용하면 페이지 속도를 높이고 속도를 유지할 수 있습니다. 하지만 주의할 점은 빠른 속도를 보장하기 위해 페이지 속도 저하로 이어지는 특정 아키텍처 패턴과 HTML 요소를 금지하는 것입니다. 예를 들어 AMP에서는 맞춤 동기 JavaScript가 허용되지 않습니다. 렌더링 차단 리소스가 페이지 로드 속도가 느려지는 일반적인 원인이기 때문입니다.
AMP 전용 접근 방식이 적합한지 이해하려면 모든 프런트엔드 코드를 AMP HTML로 표현할 수 있는지 파악해야 합니다.
- AMP 작동 방식을 읽고 AMP의 대략적인 아키텍처 제한사항과 필수 최적화를 알아보세요.
- HTML 태그를 읽고 AMP에서 허용하거나 금지하는 HTML 태그를 알아보고, AMP 구성요소 카탈로그에서 일반적인 사용 사례를 해결하기 위해 빌드한 맞춤 구성요소를 살펴보고, amp-script에서 맞춤 자바스크립트를 사용하여 AMP에서 현재 지원하지 않는 기능을 구현하는 방법을 알아보세요.
AMP 전용 방식이 페이지에 적합하지 않더라도 AMP HTML과 AMP 캐시의 속도가 보장되므로 가능하면 AMP를 사용하는 것이 좋습니다. Next.js의 하이브리드 AMP 접근방식은 AMP 페이지를 조건부로 게재하는 방법을 제공합니다. 하지만 각 페이지의 두 버전을 유지해야 하므로 유지보수 비용도 높아집니다.
결론
AMP는 속도 저하를 유발하는 패턴을 시행하고 속도 저하를 유발하는 패턴을 금지하여 사이트의 속도가 빠르고 유지되도록 보장합니다. AMP HTML과 AMP 캐시는 AMP가 빠름을 보장하는 두 가지 주요 방법입니다. 하지만 AMP를 채택하기 전에 AMP가 사이트의 모든 요구사항을 지원할 수 있는지 확인해야 합니다.