Poznaj zalety i wady obsługi AMP w aplikacji Next.js
AMP to platforma komponentów sieciowych, która gwarantuje szybkie wczytywanie stron. Next.js ma wbudowaną obsługę AMP.
Czego się nauczysz?
W tym przewodniku najpierw krótko opisujemy, jak AMP zapewnia szybkie wczytywanie stron, a potem przedstawiamy różne sposoby obsługi AMP w aplikacji Next.js. Następnie pomagamy Ci wybrać najlepsze podejście.
Ten przewodnik jest przeznaczony dla programistów stron internetowych, którzy zdecydowali się użyć Next.js, ale nie są pewni, czy powinni obsługiwać AMP.
Jak AMP zapewnia szybkie wczytywanie stron
AMP ma 2 główne strategie gwarantujące szybkość:
- AMP HTML: ograniczona forma języka HTML, która nakazuje stosowanie pewnych optymalizacji i zabrania stosowania wzorów architektonicznych, które spowalniają działanie. Aby uzyskać ogólny przegląd optymalizacji i ograniczeń, przeczytaj artykuł Jak działa AMP.
- Pamięć podręczna AMP: pamięć podręczna z treściami używana przez niektóre wyszukiwarki, takie jak Google i Bing, która korzysta z renderowania wstępnego, aby przyspieszyć wczytywanie stron. Więcej informacji o zaletach i wadach pamięci podręcznej znajdziesz w artykule Dlaczego istnieją pamięci podręczne AMP, a w artykule Jak moje strony AMP są umieszczane w pamięci podręcznej? dowiesz się, jak strony AMP trafiają do pamięci podręcznej.
Jak używać AMP w Next.js
AMP można używać w Next.js na 2 sposoby:
- Hybrydowy AMP umożliwia tworzenie wersji AMP każdej strony Next.js.
- Tylko AMP to podejście, które umożliwia ustawienie AMP jako jedynej opcji dla strony.
Chociaż Next.js jest zwykle uważany za framework React, ważne jest, aby zrozumieć, że gdy używasz Next.js do obsługi stron AMP, nie możesz już uruchamiać komponentów React po stronie klienta, ponieważ komponenty React nie są prawidłowymi komponentami AMP. Innymi słowy, Next.js nie jest już frameworkiem React, ale mechanizmem szablonów po stronie serwera do generowania stron AMP.
Jak zdecydować, czy zastosować podejście hybrydowe AMP czy tylko AMP
Jeśli zależy Ci na szybkości wczytywania, strona tylko z AMP może być dobrym sposobem na zapewnienie, że będzie ona wczytywana szybko i będzie pozostawać szybka. Ale jest pewien haczyk: aby zagwarantować szybkość, AMP zakazuje stosowania określonych wzorów architektonicznych i elementów HTML, które często spowalniają strony. Na przykład AMP nie zezwala na niestandardowy kod JavaScript synchroniczny, ponieważ zasoby blokujące renderowanie są częstą przyczyną wolnego wczytywania stron.
Aby zrozumieć, czy podejście „tylko AMP” jest dla Ciebie odpowiednie, musisz ustalić, czy cały kod front-endu może być reprezentowany w AMP HTML:
- Aby poznać ogólne ograniczenia architektoniczne i obowiązkowe optymalizacje AMP, przeczytaj artykuł Jak działa AMP.
- Przeczytaj artykuł Tagi HTML, aby dowiedzieć się, jakie tagi HTML są dozwolone, a jakie zabronione w AMP. Przejrzyj katalog komponentów AMP, aby zapoznać się z niestandardowymi komponentami opracowanymi przez społeczność AMP w celu rozwiązania typowych problemów. Zapoznaj się też z tagiem amp-script, aby dowiedzieć się, jak za pomocą niestandardowego kodu JavaScript wdrażać funkcje, których AMP obecnie nie obsługuje.
Nawet jeśli podejście polegające na korzystaniu tylko z AMP nie sprawdzi się w przypadku Twojej strony, warto korzystać z AMP zawsze, gdy to możliwe, ze względu na gwarantowaną szybkość AMP HTML i pamięci podręcznych AMP. Hybrydowe podejście AMP w Next.js umożliwia wyświetlanie stron AMP w sposób warunkowy. Wymaga to jednak większych nakładów na utrzymanie, ponieważ trzeba obsługiwać 2 wersje każdej strony.
Podsumowanie
AMP gwarantuje, że Twoja witryna będzie wczytywać się szybko i nie zwalnia, ponieważ narzuca wzorce, które prowadzą do szybkiego działania, i zakazuje wzorów, które powodują spowolnienie. AMP HTML i AMP Cache to 2 główne sposoby, dzięki którym AMP zapewnia szybkość. Zanim jednak wdrożysz AMP, musisz się upewnić, że będzie ono spełniać wszystkie wymagania Twojej witryny.