Poznaj korzyści i zalety obsługi stron AMP w aplikacji Next.js.
AMP to platforma komponentów internetowych, która gwarantuje szybkie wczytywanie stron. Kod Next.js ma wbudowaną obsługę stron AMP.
Czego się nauczysz?
W tym przewodniku pokrótce omawiamy sposób, w jaki AMP gwarantuje szybkie wczytywanie stron, i wyjaśniamy różne sposoby obsługi stron AMP w aplikacji Next.js, a następnie pomagamy zdecydować, które z nich jest dla Ciebie najlepsze.
Przewodnik jest skierowany do programistów stron internetowych, którzy zdecydowali się na używanie Next.js, ale nie są pewni, czy obsługują AMP.
Jak AMP gwarantuje szybkie wczytywanie stron
AMP ma 2 główne strategie gwarantujące szybkość działania:
- AMP HTML: ograniczona forma kodu HTML, która wymaga niektórych optymalizacji i zabroni używanie wzorców architektonicznych, które powodują powolne działanie. W artykule Jak działają strony AMP znajdziesz ogólne omówienie optymalizacji i ograniczeń.
- Pamięć podręczna AMP: pamięć podręczna zawartości używana przez niektóre wyszukiwarki, np. Google i Bing, która korzysta z renderowania wstępnego, aby przyspieszyć wczytywanie stron. Więcej informacji o zaletach i zaletach pamięci podręcznej znajdziesz w artykule Dlaczego moja strona AMP jest przechowywana, a także o tym, W jaki sposób moja strona AMP jest zapisywana w pamięci podręcznej? i dowiedz się, w jaki sposób Twoje strony AMP trafiają do pamięci podręcznej.
Jak używać stron AMP w Next.js
Z AMP możesz korzystać w Next.js na 2 sposoby:
- Metoda Hybrydowa AMP pozwala utworzyć towarzyszącą wersję AMP dowolnej strony Next.js.
- Podejście Tylko AMP pozwala ustawić AMP jako jedyną opcję strony.
Mimo że Next.js jest zwykle nazywany platformą React, trzeba 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. Inaczej mówiąc, Next.js nie jest już platformą React, ale mechanizmem tworzenia szablonów po stronie serwera służącym do generowania stron AMP.
Jak zdecydować, czy stosować metodę hybrydową czy tylko AMP
Jeśli zależy Ci na szybkości wczytywania, strona tylko AMP może być dobrym sposobem na zapewnienie jej szybkości. Oto jednak problem: aby zapewnić szybkość działania, standard AMP zabrania stosowania pewnych wzorców architektonicznych i elementów HTML, które często powodują powolne działanie stron. Na przykład strony AMP nie zezwalają na używanie niestandardowego synchronicznego kodu JavaScriptu, ponieważ zasoby blokujące renderowanie są częstą przyczyną powolnego wczytywania stron.
Aby przekonać się, czy rozwiązanie wyłącznie AMP jest dla Ciebie odpowiednie, sprawdź, czy cały kod frontendu można umieścić w formacie AMP HTML:
- Przeczytaj artykuł Jak działają strony AMP, aby poznać ogólne ograniczenia architektoniczne AMP i wymagane optymalizacje.
- Przeczytaj artykuł o tagach HTML, aby dowiedzieć się, jakie tagi HTML są dozwolone, a jakie zabronione. Przejrzyj katalog komponentów AMP, aby zobaczyć komponenty niestandardowe opracowane przez społeczność AMP, aby używać ich w typowych przypadkach użycia. Z kolei amp-script dowiesz się, jak używać niestandardowego kodu JavaScript do implementowania funkcji, których standard AMP obecnie nie obsługuje.
Nawet wtedy, gdy metoda AMP nie sprawdzi się w przypadku Twojej strony, i tak warto korzystać ze stron AMP, gdy tylko jest to możliwe, ze względu na gwarantowaną szybkość AMP HTML i pamięci podręcznej AMP. Hybrydowe strony AMP stosowane w Next.js umożliwiają warunkowe wyświetlanie stron AMP. Wiąże się to jednak również z wyższymi kosztami utrzymania, ponieważ wymaga utrzymywania 2 wersji każdej strony.
Podsumowanie
AMP gwarantuje, że Twoja witryna będzie działać szybko i szybko, egzekwując wzorce, które powodują jej powolne działanie. AMP HTML i AMP Cache to dwa główne sposoby zapewniania szybkości działania AMP. Zanim wdrożysz AMP, upewnij się, że obsługuje ono wszystkie wymagania witryny.