Next.js 앱에서 AMP를 지원할 때의 이점과 장단점을 알아보세요.
AMP는 빠른 페이지 로드를 보장하는 웹 구성요소 프레임워크입니다. Next.js에는 AMP가 기본적으로 지원됩니다.
학습 내용
이 가이드에서는 먼저 AMP가 빠른 페이지 로드를 보장하는 방법을 간략하게 설명한 후 Next.js 앱에서 AMP를 지원하는 여러 방법을 설명한 후 어떤 방법이 가장 적합한지 결정하는 데 도움을 줍니다.
이 가이드는 Next.js를 사용하기로 결정했지만 AMP 지원 여부를 잘 모르는 웹 개발자를 대상으로 합니다.
AMP가 빠른 페이지 로드를 보장하는 방법
AMP에는 빠른 속도를 보장하기 위한 두 가지 주요 전략이 있습니다.
- AMP HTML: 특정 최적화를 필수로 하고 속도 저하를 유발하는 아키텍처 패턴을 금지하는 제한된 형식의 HTML입니다. 최적화 및 제한에 관한 대략적인 개요는 AMP 작동 방식을 참고하세요.
- AMP 캐시: Google 및 Bing과 같은 일부 검색엔진에서 사용하는 콘텐츠 캐시로, 페이지 로드 속도를 높이기 위해 사전 렌더링을 사용합니다. AMP Cache가 존재하는 이유에서 캐시의 이점과 장단점을 자세히 알아보고, 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에서는 맞춤 동기식 자바스크립트를 허용하지 않습니다. 렌더링 차단 리소스가 페이지 로드 속도 저하의 일반적인 원인이기 때문입니다.
AMP 전용 접근 방식이 자신에게 적합한지 파악하려면 모든 프런트엔드 코드를 AMP HTML로 표현할 수 있는지 확인해야 합니다.
- AMP 작동 방식을 읽고 AMP의 높은 수준의 아키텍처 제한사항과 필수 최적화를 이해합니다.
- HTML 태그를 읽고 AMP에서 허용 및 금지하는 HTML 태그를 알아보고 AMP 구성요소 카탈로그에서 일반적인 사용 사례를 해결하기 위해 AMP 커뮤니티에서 빌드한 맞춤 구성요소를 확인하세요. amp-script에서 맞춤 자바스크립트를 사용하여 현재 AMP에서 지원하지 않는 기능을 구현하는 방법을 알아보세요.
AMP 전용 접근 방식이 페이지에서 작동하지 않더라도 AMP HTML 및 AMP 캐시의 보장된 빠른 속도 때문에 가능하면 AMP를 사용하는 것이 좋습니다. Next.js의 하이브리드 AMP 접근 방식은 조건부로 AMP 페이지를 제공하는 방법을 제공합니다. 하지만 각 페이지의 두 버전을 유지해야 하므로 유지보수 비용이 높아집니다.
결론
AMP는 속도 저하로 이어지는 패턴을 적용하고 속도 저하로 이어지는 패턴을 금지하여 사이트의 빠른 속도를 보장하고 속도를 유지합니다. AMP HTML 및 AMP 캐시는 AMP에서 빠른 속도를 보장하는 두 가지 주요 방법입니다. 하지만 AMP를 채택하기 전에 AMP가 사이트의 모든 요구사항을 지원할 수 있는지 확인해야 합니다.