Angular Universal In Practice – How to build SEO Friendly Single Page Apps with Angular

W ciągu ostatnich kilku miesięcy dużo mówiło się o Angularze i o tym, jak używać go do budowania aplikacji klienckich, ale jedna z jego najważniejszych innowacji dzieje się tak naprawdę na serwerze.

Jest to technologia, która może pomóc umożliwić zupełnie nowy typ aplikacji internetowych: Angular Universal. Dowiedzmy się o niej więcej! Przejdźmy przez następujące tematy:

• Wady aplikacji jednostronicowych
• Dlaczego więc nie używamy aplikacji jednostronicowych wszędzie?
• Zrozumienie implikacji SEO aplikacji jednostronicowych
• Czym jest Angular Universal, co umożliwia?
• Renderowanie po stronie serwera to naprawdę nie tylko renderowanie na serwerze
• Demonstracja aplikacji single page renderowanej po stronie serwera w akcji
• Pre-renderowanie w czasie budowania – przesyłanie pre-renderowanych aplikacji do Amazon S3
• Zabójcza cecha Angular Universal: Dependency Injection
• Konkluzje

Ten post jest wprowadzeniem do Angular Universal. Aby uzyskać bardziej szczegółowy przewodnik obejmujący jak używać go w praktyce, spójrz na ten post:

Angular Universal: a Complete Practical Guide

Advantages of Single Page Applications

Aplikacje jednostronicowe istnieją od jakiegoś czasu, a frameworki takie jak Angular, React czy Ember są prawdopodobnie bibliotekami Javascript, które otrzymują najwięcej uwagi w świecie Javascript.

Zalety SPA to tak naprawdę tylko jedna rzecz

Zalet aplikacji jednostronicowych jest potencjalnie wiele:

• gdy użytkownik nawiguje po stronie, tylko jej części są zastępowane, dzięki czemu doświadczenie jest bardziej płynne
• po pierwszym załadowaniu strony, tylko dane przechodzą przez drut, gdy użytkownik nawiguje po aplikacji: JSON jest dostarczany do przeglądarki i stosowany do szablonów HTML bezpośrednio do przeglądarki
• to prowadzi do lepszej wydajności i otwiera możliwość wykorzystania tych usług backendowych do innych rzeczy, ponieważ po prostu zwracają dane

Możemy sprowadzić to tylko do jednej rzeczy:

Single Page Apps mogą zapewnić znacznie lepsze User Experience!

A user experience jest krytyczny w publicznym świecie Internetu. Istnieją liczne badania, które udowadniają ponad wszelką wątpliwość, że spadek strony i porzucenie strony przez użytkownika wzrasta bardzo szybko wraz z opóźnieniem strony.

Jeśli strona wymaga 200ms więcej do załadowania, będzie to miało potencjalnie duży wpływ na biznes i sprzedaż (zobacz te badania Google). Jest to jeszcze bardziej widoczne na urządzeniach mobilnych, gdzie aplikacje są wolniejsze.

Dlaczego więc nie używać SPA wszędzie?

Zważywszy na te statystyki i fakt, że SPA dają znacznie lepsze doświadczenie użytkownika, dlaczego nie wszyscy używają aplikacji jednostronicowych do wszystkiego?

Są one dostępne od lat i każda strona z systemem nawigacji może skorzystać z bycia zbudowaną w ten sposób.

Zrozumienie implikacji SEO aplikacji jednostronicowej

Jest jeden główny powód, dla którego aplikacje jednostronicowe nie są używane wszędzie do tej pory (z dwoma oddzielnymi przyczynami):

Aplikacje jednostronicowe nie radzą sobie dobrze w wyszukiwarkach

Dwa powody tego są następujące:

Wyszukiwarka musi „zgadywać”, kiedy strona jest kompletna

Gdy pojedyncza strona jest pobierana, wyszukiwarka zobaczy tylko bardzo mało HTML. Dopiero gdy framework MVC zacznie działać, strona zostanie w pełni wyrenderowana przy użyciu danych uzyskanych z serwera.

Problem polega na tym, że wyszukiwarka musi zgadywać, kiedy framework Javascript zakończy renderowanie strony, więc istnieje ryzyko indeksowania niekompletnej zawartości.

Drugim powodem, dla którego SPA nie radzą sobie dobrze z wyszukiwarkami jest:

Głębokie linki SPA są trudne do zaindeksowania

Z powodu braku obsługi HTML5 History w przeglądarkach, aplikacje jednostronicowe opierają swoje nawigacyjne adresy URL na kotwicach zakładek HTML (adresy URL z #, jak /home#section1). Nie są one łatwo indeksowane jako oddzielne strony przez wyszukiwarki, są sposoby aby to zrobić, ale jest to bolesne i zawsze będą trudności z indeksowaniem tego w przeciwieństwie do użycia zwykłego HTML.

Wniosek mógłby być taki, że nie ma sensu mieć najłatwiejszej w nawigacji strony, jeśli sposób w jaki jest zbudowana uniemożliwia dobre SEO.

Teraz dobra wiadomość

Dobrą wiadomością jest to, że żaden z tych dwóch powodów nie jest już w 100% dokładny! Google zaczęło lepiej indeksować aplikacje jednostronicowe.

A niedawna deprecjacja IE9 oznacza, że Historia HTML5 jest dostępna prawie wszędzie, co sprawia, że użycie zakotwiczonych adresów URL nie jest już potrzebne dla SPA, możemy po prostu użyć zwykłych adresów URL (jak /home/section1).

To świetna wiadomość, ale są inne wyszukiwarki, które napędzają znaczący ruch. Baidu na przykład napędza ponad połowę ruchu w Chinach (1,3 miliarda ludzi).

Jest jeszcze kwestia wydajności: aplikacja jednostronicowa będzie wolniejsza ze względu na duże ilości Javascript, których potrzebuje i duży czas uruchamiania, a zatem będzie działać gorzej niż rozwiązanie oparte na HTML.

A to oznacza spadki stron, ten problem nie zniknie w najbliższym czasie, szczególnie na urządzeniach mobilnych. Czy jest jakiś sposób aby mieć to co najlepsze ze wszystkich światów, i uzyskać zarówno natychmiastową nawigację, przyjazność SEO i wysoką wydajność na urządzeniach mobilnych?

Odpowiedź brzmi Tak, z Angular Universal.

Co to jest Angular Universal, co umożliwia?

Praktycznie rzecz ujmując, Angular Universal umożliwia nam budowanie aplikacji, które mają zarówno zalety wydajności i zaangażowania użytkownika aplikacji jednostronicowych w połączeniu z przyjaznością dla SEO stron statycznych.

Renderowanie po stronie serwera to tak naprawdę nie tylko renderowanie na serwerze

Angular Universal ma kilka innych cech poza tym, że daje rozwiązanie do renderowania HTML na serwerze. Opierając się na określeniu „renderowanie po stronie serwera”, moglibyśmy pomyśleć, że to, co robi Angular Universal, jest podobne na przykład do języka szablonów po stronie serwera, takiego jak Jade. Ale jest w nim znacznie więcej funkcjonalności.

Z Angular Universal, otrzymujesz początkowy ładunek HTML renderowany na serwerze, ale także uruchamiasz okrojoną wersję Angulara na kliencie i stamtąd Angular przejmuje stronę jako aplikację jednostronicową, generując stamtąd cały HTML na kliencie zamiast na serwerze.

Więc wynik końcowy, który otrzymujesz jest taki sam, jest to działająca aplikacja jednostronicowa, ale teraz, ponieważ otrzymałeś początkowe obciążenie HTML z serwera, otrzymujesz znacznie lepszy czas uruchamiania, a także w pełni indeksowalną aplikację SEO.

Pre-renderowanie w czasie budowania – przesyłanie wstępnie renderowanych aplikacji do Amazon S3

Inną możliwością, którą otwiera Angular Universal, jest wstępne renderowanie zawartości, która nie zmienia się często w czasie budowania. Będzie to możliwe za pomocą wtyczek Grunt, Gulp lub Weppack. Oto jak będzie wyglądać konfiguracja Gulp, która pre-renderuje zawartość naszej aplikacji do pliku:

A następnie po prostu prześlemy to do wiadra Amazon S3 używając Amazon CLI:

Jeśli połączymy to wiadro z dystrybucją CDN Cloudfront, mamy bardzo przystępną i skalowalną stronę internetową.

Co jeśli użytkownik od razu zacznie wchodzić w interakcję ze stroną?

Istnieje początkowe opóźnienie pomiędzy momentem, w którym zwykły HTML jest renderowany i prezentowany użytkownikowi, a momentem, w którym Angular wkracza po stronie klienta i przejmuje rolę SPA.

W tym przedziale czasowym, użytkownik może kliknąć na coś lub nawet zacząć wpisywać w pole wyszukiwania. To, na co pozwala Angular Universal poprzez swoją funkcjonalność preboot, to nagrywanie zdarzeń, które wywołuje użytkownik, i odtwarzanie ich, gdy Angular się włączy.

W ten sposób Angular będzie w stanie odpowiedzieć na te zdarzenia, jak na przykład pokazując wyniki wyszukiwania na liście Typeahead.

Ale jak to wygląda na serwerze pod względem kodu?

Jak renderować HTML z Angularem w serwerze

Sposób, w jaki treść jest renderowana na serwerze, polega na użyciu ekspresowego silnika renderującego Angular Universal expressEngine :

Dostępny jest również silnik Hapi, jeśli wolisz używać Hapi zamiast Express. Pojawiają się również silniki renderujące dla serwerów dla wszystkich rodzajów platform: C#, Java, PHP, zobacz ten poprzedni post, aby uzyskać więcej szczegółów.

Jak zacząć z Angular Universal?

Najlepszym miejscem do rozpoczęcia jest oficjalny starter universal-starter, wraz ze starterem otrzymujemy działającą aplikację, która zawiera serwer Express z renderowaniem po stronie serwera działającym po wyjęciu z pudełka.

To, co jest innowacyjne w Angular Universal, to prostota użycia. Jedną z głównych cech projektowych Angular Universal jest sposób, w jaki wykorzystuje on wstrzykiwanie zależności.

Rendering po stronie serwera Rozwój nie jest jak kodowanie tylko dla klienta

W większości przypadków chcemy, aby nasza aplikacja robiła dokładnie to samo na serwerze, co na kliencie, poprzez nieuzależnianie się bezpośrednio od interfejsów API przeglądarki.

Rzeczywistość rozwoju renderowania po stronie serwera jest taka, że nie zawsze jest to możliwe i są pewne rzeczy, które chcemy robić inaczej na kliencie i na serwerze.

Przykładem może być renderowanie wykresu: prawdopodobnie chcesz wywołać bibliotekę innej firmy, która używa SVG. Nie możemy jej wywołać na serwerze, więc jak ją wyrenderować?

Inny przykład, jak możemy renderować strony uwierzytelnione? Ponieważ zawartość zależy od tego, kto jest aktualnie zalogowany.

Używanie Dependency Injection do implementacji uwierzytelniania

Aby obsłużyć uwierzytelnianie, jest to jeden ze sposobów, aby to zrobić:

• Na kliencie chcemy, aby tożsamość użytkownika była pobierana z tokena dostępnego w pliku cookie lub w lokalnym magazynie przeglądarki.

• Na serwerze, podczas renderowania żądania chcemy, aby token tożsamości został odczytany z nagłówka żądania HTTP.

Jak uzyskać to samo wyjście strony podczas nawigacji do tej strony na kliencie poprzez przejście routera vs na serwerze poprzez odświeżenie przeglądarki?

Najpierw zdefiniuj interfejs usługi

Pierwszym krokiem jest zdefiniowanie interfejsu, który twoja usługa będzie dostarczać, który jest niezależny od runtime:

Potem dostarczamy dwie implementacje dla tego interfejsu, jedną dla klienta i drugą dla serwera. Na przykład na serwerze nie ma okazji do wywołania metody logowania, więc wyrzucamy błąd:

Ale na kliencie zamierzamy uruchomić ekran blokady Auth0 (biblioteka tylko dla przeglądarek firm trzecich), aby zapewnić formularz logowania:

Następnie wstrzykujemy różne implementacje interfejsu na serwerze i na kliencie, dla tego samego tokena wtrysku:

I w ten sposób możemy zrobić coś innego na kliencie i na serwerze w Angular Universal, wykorzystując kontener Angular dependency injection.

W rzeczywistości Angular Universal jest zbudowany również przy użyciu tego pojęcia: na przykład sposób renderowania HTML polega na tym, że zamiast wstrzykiwania renderera DOM podczas uruchamiania frameworka, wstrzykuje on renderer serwera, który generuje HTML przy użyciu biblioteki serializacji parse5 HTML.

Wnioski

Jak każda technologia, zalety renderowania po stronie serwera będą ewoluować w czasie. Ale już teraz, renderowanie po stronie serwera prezentuje dużą przewagę w budowaniu aplikacji przyjaznych dla urządzeń mobilnych, przyjaznych dla wyszukiwarek, które mają wysokie zaangażowanie użytkownika dzięki płynnej, natychmiastowej nawigacji.

Its easier than ever today to build these types of apps using Angular Universal and the universal starter.

With Angular Universal the use of dependency injection makes it very simple to do something slightly different on the server than on the client if we need to.

Getting Started With Angular

Jeśli chcesz dowiedzieć się więcej o Angular, spójrz na kurs Angular for Beginners:

Inne posty na temat Angular

Jeśli podobał Ci się ten post, oto kilka innych popularnych postów na naszym blogu:

• Angular Router – How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
• Angular Router – Extended Guided Tour, Avoid Common Pitfalls
• Angular Components – The Fundamentals
• How to run Angular in Production Today
• How to build Angular apps using Observable Data Services – Pitfalls to avoid
• Introduction to Angular Forms – Template Driven, Model Driven or In-Between
• Angular ngFor – Poznaj wszystkie funkcje, w tym trackBy, dlaczego nie jest to tylko dla tablic?
• Angular Universal w praktyce – Jak budować przyjazne SEO aplikacje jednostronicowe z Angular
• Jak naprawdę działa wykrywanie zmian w Angular?