Renderowanie dynamiczne za pomocą usługi Rendertron

Czwartek, 31 stycznia 2019 r.

Wiele platform frontendowych korzysta z kodu JavaScript do wyświetlania treści. Może to powodować dłuższe indeksowanie treści lub aktualizowanie zindeksowanych treści przez Google.

Podczas tegorocznej konferencji Google I/O przedstawiliśmy obejście tego problemu, czyli renderowanie dynamiczne. Można je zaimplementować na wiele sposobów. W tym poście przedstawiamy przykładową implementację renderowania dynamicznego przy użyciu usługi Rendertron – rozwiązania open source opartego na przeglądarce Chromium pozbawionej interfejsu użytkownika.

W przypadku jakich witryn należy korzystać z renderowania dynamicznego?

Nie wszystkie wyszukiwarki i boty mediów społecznościowych odwiedzające witryny mogą wykonywać JavaScript. Na przykład Googlebot może potrzebować więcej czasu na wykonanie JavaScriptu i dodatkowo ma pewne ograniczenia.

Renderowanie dynamiczne sprawdza się w przypadku treści, które często się zmieniają, a do ich wyświetlenia potrzebny jest JavaScript. Wrażenia użytkownika (zwłaszcza w czasie potrzebnym do pierwszego wyrenderowania elementu znaczącego) mogą być lepsze dzięki użyciu renderowania hybrydowego (np. dzięki zastosowaniu technologii Angular Universal).

Jak działa renderowanie dynamiczne?

Jak działa renderowanie dynamiczne

Renderowanie dynamiczne polega na przełączaniu się między treściami renderowanymi po stronie klienta i wstępnie wyrenderowanymi w zależności od określonych klientów użytkownika.

Mechanizm renderowania jest potrzebny do wykonania JavaScriptu i utworzenia statycznego kodu HTML. Rendertron to projekt open source, który do renderowania wykorzystuje przeglądarkę Chromium pozbawioną interfejsu. Aplikacje z jedną stroną często ładują dane w tle lub opóźniają renderowanie treści. Usługa Rendertron jest wyposażona w mechanizmy, które pozwalają jej określić moment ukończenia renderowania witryny. Czeka na zrealizowanie wszystkich żądań sieciowych i zadań.

Tematy poruszane w tym poście:

  1. Przykładowa aplikacja internetowa
  2. Konfigurowanie małego serwera express.js do obsługi aplikacji internetowej
  3. Instalowanie i konfigurowanie usługi Rendertron jako elementu pośredniczącego w renderowaniu dynamicznym

Przykładowa aplikacja internetowa

Aplikacja internetowa „kitten corner” używa JavaScriptu do ładowania wielu różnych obrazów kotów za pomocą interfejsu API i wyświetlania ich w postaci siatki.

Siatka zdjęć słodkich kociaków i przycisk, żeby pokazać ich więcej – czy to nie najlepsze z możliwych zastosowań aplikacji internetowej?

Oto nasz JavaScript:

const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';
   const tpl = document.querySelector('template').content;
   const container = document.querySelector('ul');
   function init () {
     fetch(apiUrl)
     .then(response => response.json())
     .then(cats => {
       container.innerHTML = '';
       cats
         .map(cat => { const li = document.importNode(tpl, true); li.querySelector('img').src = cat.url; return li;
         }).forEach(li => container.appendChild(li));
     })
   }
   init();
   document.querySelector('button').addEventListener('click', init);

Ta aplikacja internetowa używa nowoczesnego kodu JavaScript (ES6), którego Googlebot jeszcze nie obsługuje. Aby sprawdzić, czy Googlebot widzi treści, możemy skorzystać z testu optymalizacji mobilnej.

Test pokazuje, że strona jest dostosowana do urządzeń mobilnych, ale na zrzucie ekranu nie ma ani jednego kota. Widać tylko nagłówek i przycisk – nie ma zdjęć kotów.

Rozwiązanie tego problemu jest proste – ale to też świetna okazja, aby dowiedzieć się, jak skonfigurować renderowanie dynamiczne. Umożliwi ono Googlebotowi wyświetlanie zdjęć kotów bez potrzeby wprowadzania zmian w kodzie aplikacji internetowej.

Konfigurowanie serwera

Aby utworzyć serwery WWW do obsługi aplikacji internetowej, użyjemy biblioteki express środowiska node.js.

Kod serwera wygląda tak (tutaj znajdziesz pełny kod źródłowy projektu): 

const express = require('express');
const app = express();
const DIST_FOLDER = process.cwd() + '/docs';
const PORT = process.env.PORT || 8080;
// Serve static assets (images, css, etc.)
app.get('*.*', express.static(DIST_FOLDER));
// Point all other URLs to index.html for our single page app
app.get('*', (req, res) => {
  res.sendFile(DIST_FOLDER + '/index.html');
});
// Start Express Server
app.listen(PORT, () => {
  console.log(`Node Express server listening on https://localhost:${PORT} from ${DIST_FOLDER}`);
});

Możesz przetestować ten przykład. Jeśli korzystasz z nowoczesnej przeglądarki, powinno pokazać się dużo zdjęć kotów. Aby uruchomić projekt na komputerze, w node.js musisz uruchomić te polecenia: 

npm install --save express rendertron-middleware
node server.js

Następnie otwórz w przeglądarce stronę https://localhost:8080. Teraz nadszedł czas na skonfigurowanie renderowania dynamicznego.

Wdrażanie wystąpienia usługi Rendertron

Rendertron uruchamia serwer, który korzysta z adresu URL i na jego podstawie zwraca statyczny kod HTML, używając do tego przeglądarki Chromium pozbawionej interfejsu. Będziemy postępować zgodnie z zaleceniami projektu Rendertron i użyjemy Google Cloud Platform.

Formularz tworzenia nowego projektu Google Cloud Platform.

Możesz zacząć, korzystając z poziomu bezpłatnego. Korzystanie z tej procedury na etapie produkcyjnym może wiązać się z opłatami zgodnie z modelem cenowym Google Cloud Platform.

  1. Utwórz nowy projekt w Google Cloud Console. Zanotuj „Project ID” (Identyfikator projektu) poniżej pola wprowadzania.
  2. Zainstaluj pakiet SDK Google Cloud zgodnie z opisem w dokumentacji i zaloguj się.
  3. Sklonuj repozytorium Rendertron z GitHub przy użyciu tego polecenia: 
    git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
  4. Użyj tych poleceń, aby zainstalować zależności i utworzyć projekt Rendertron na komputerze: 
    npm install && npm run build
  5. Włącz pamięć podręczną usługi Rendertron, tworząc nowy plik config.json w katalogu rendertron z tą zawartością: 
    { "datastoreCache": true }
  6. Uruchom to polecenie z katalogu rendertron. Zastąp YOUR_PROJECT_ID identyfikatorem projektu z kroku 1. 
    gcloud app deploy app.yaml --project YOUR_PROJECT_ID
  7. Wybierz region i potwierdź wdrożenie. Zaczekaj na zakończenie procesu.
  8. Wpisz adres URL YOUR_PROJECT_ID.appspot.com. Powinien pokazać się interfejs usługi Rendertron z polem wprowadzania i kilkoma przyciskami.
Interfejs usługi Rendertron po wdrożeniu jej w Google Cloud Platform

Jeśli pokaże się interfejs internetowy usługi Rendertron, oznacza to, że udało Ci się wdrożyć jej wystąpienie. Zanotuj adres URL projektu (YOUR_PROJECT_ID.appspot.com), ponieważ będziesz go potrzebować na kolejnym etapie procesu.

Dodawanie usługi Rendertron do serwera

Serwer WWW korzysta z biblioteki express.js, a Rendertron zawiera express.js jako oprogramowanie pośredniczące. W katalogu z plikiem server.js uruchom to polecenie: 

npm install --save rendertron-middleware

Polecenie to spowoduje zainstalowanie elementu pośredniczącego usługi Rendertron z funkcji npm, dzięki czemu będzie można dodać go do serwera: 

const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');

Konfigurowanie listy botów

Rendertron używa nagłówka HTTP user-agent, aby określić, czy żądanie pochodzi od bota czy z przeglądarki użytkownika. Korzysta w tym celu z aktualnej listy klientów użytkownika. Domyślnie lista ta nie zawiera Googlebota, ponieważ robot ten może wykonywać JavaScript. Aby usługa Rendertron renderowała również żądania Googlebota, dodaj go do listy klientów użytkownika: 

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

Rendertron porównuje później nagłówek user-agent z tym wyrażeniem regularnym.

Dodawanie elementu pośredniczącego

Aby wysyłać żądania botów do wystąpienia usługi Rendertron, musimy dodać element pośredniczący do serwera express.js. Element pośredniczący sprawdza żądania klientów użytkownika i przekazuje żądania znanych botów do wystąpienia usługi Rendertron. Dodaj ten kod do pliku server.js i nie zapomnij zastąpić tekstu YOUR_PROJECT_ID identyfikatorem Twojego projektu w Google Cloud Platform. 

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

Boty wysyłające żądanie do przykładowej witryny otrzymują statyczny adres HTML z usługi Rendertron. Dlatego boty nie muszą wykonywać JavaScriptu w celu wyświetlania treści.

Testowanie konfiguracji

Aby sprawdzić, czy konfiguracja usługi Rendertron jest prawidłowa, powtórz test optymalizacji mobilnej.

Test pokazuje, że strona jest dostosowana do urządzeń mobilnych, a na zrzucie ekranu widać wszystkie brakujące koty.

Tym razem zdjęcia kotów są widoczne. Na karcie HTML pokazuje się cały wygenerowany kod HTML i JavaScript. Zastosowanie usługi Rendertron sprawiło, że JavaScript nie jest potrzebny do wyświetlania treści.

Podsumowanie

Udało się nam utworzyć konfigurację renderowania dynamicznego bez wprowadzania zmian w aplikacji internetowej. Dzięki temu możesz udostępniać robotom statyczną wersję HTML aplikacji internetowej.

Autor: Martin Splitt, Open Web Unicorn