Poznaj zalety i zalety obsługi stron AMP w aplikacji Next.js
AMP to platforma komponentów internetowych, która gwarantuje szybkie wczytywanie stron. Plik Next.js ma wbudowaną obsługę stron AMP.
Czego się nauczysz?
W tym przewodniku pokrótce opisujemy, jak AMP gwarantuje szybkie wczytywanie stron, a potem wyjaśniamy różne sposoby obsługi stron AMP w aplikacji Next.js, a potem pomagamy wybrać najlepsze rozwiązanie dla Ciebie.
Ten przewodnik jest skierowany do programistów stron internetowych, który zdecydował się na korzystanie z kodu Next.js, ale nie jest pewny, czy powinien obsługiwać AMP.
Jak AMP gwarantuje szybkie wczytywanie stron
Strony AMP cechują się 2 głównymi strategiami, które pozwalają zagwarantować szybkość działania:
- AMP HTML: ograniczona forma kodu HTML, która wymaga stosowania określonych optymalizacji i nie pozwala na tworzenie wzorców architektonicznych powodujących spowolnienie działania. Ogólne informacje o optymalizacji i ograniczeniach znajdziesz w artykule Jak działa AMP.
- Pamięć podręczna AMP: pamięć podręczna zawartości używana przez niektóre wyszukiwarki, takie jak Google i Bing, wykorzystująca renderowanie wstępne, by przyspieszyć wczytywanie stron. Przeczytaj artykuł Dlaczego istnieją pamięci podręczne AMP, aby dowiedzieć się więcej o zaletach i wadach pamięci podręcznych, oraz w artykule Jak moja strona AMP jest buforowana?, aby zrozumieć, jak strony AMP trafiają do pamięci podręcznych.
Jak używać stron AMP w Next.js
Są 2 sposoby korzystania ze stron AMP w Next.js:
- Korzystanie z hybrydowej strony AMP pozwala utworzyć wersję AMP każdej strony Next.js.
- Korzystając z metody Tylko AMP, możesz ustawić AMP jako jedyną opcję w przypadku danej strony.
Choć Next.js jest zwykle nazywany platformą React, warto pamiętać, że gdy używasz Next.js do wyświetlania stron AMP, nie możesz już uruchamiać komponentów React po stronie klienta, ponieważ komponenty React nie są prawidłowymi komponentami AMP. Oznacza to, że Next.js nie jest już platformą React, ale raczej mechanizmem tworzenia szablonów po stronie serwera do generowania stron AMP.
Jak zdecydować, czy wybrać hybrydową stronę AMP, czy tylko wersję AMP
Jeśli zależy Ci na szybkości wczytywania stron, dobrym rozwiązaniem będzie dodanie strony AMP, by zapewnić szybkie działanie i działanie strony. Tu jest haczyk: aby zagwarantować szybkość działania, AMP nie zezwala na niektóre wzorce architektoniczne i elementy HTML, które często powodują wolniejsze działanie stron. Na przykład strony AMP nie zezwalają na używanie niestandardowego synchronicznego kodu JavaScript, ponieważ zasoby blokujące renderowanie są częstą przyczyną powolnego wczytywania stron.
Aby sprawdzić, czy tylko AMP HTML jest dla Ciebie odpowiednie, musisz sprawdzić, czy cały kod frontendu można umieścić w formacie AMP HTML:
- Przeczytaj artykuł Jak działa AMP, aby poznać ogólne ograniczenia dotyczące architektury AMP i obowiązkowe optymalizacje.
- Przeczytaj artykuł Tagi HTML, aby dowiedzieć się, jakie tagi HTML są dozwolone lub zabronione w przypadku stron AMP. W katalogu komponentów AMP znajdziesz komponenty niestandardowe opracowane przez społeczność AMP, które obsługują typowe przypadki użycia. Z artykułu amp-script dowiesz się, jak używać niestandardowego kodu JavaScript do wdrażania funkcji, których AMP obecnie nie obsługuje.
Nawet jeśli sposób wyłącznie na stronach AMP nie sprawdzi się w przypadku Twojej strony, warto korzystać z nich, gdy tylko jest to możliwe, ze względu na gwarantowaną szybkość działania stron AMP HTML i AMP Cache. Hybrydowe podejście AMP w Next.js umożliwia warunkowe wyświetlanie stron AMP. Wiąże się to jednak z wyższymi kosztami obsługi, ponieważ wymaga posiadania 2 wersji każdej strony.
Podsumowanie
AMP gwarantuje szybkie działanie strony, egzekwując jej wzorce i stosując wzorce, które sprawiają, że strony działają wolno. AMP HTML i AMP Cache to 2 główne sposoby, dzięki którym AMP gwarantuje szybkość. Przed wdrożeniem standardu AMP upewnij się jednak, że będzie on spełniać wszystkie wymagania Twojej witryny.