Rendertron ilə Dinamik Render

31 yanvar 2019, Cümə axşamı

Bir çox frontend çərçivələri məzmunu göstərmək üçün JavaScript-ə güvənir. Bu, Google-un məzmununuzu indeksləşdirməsinin və ya indekslənmiş məzmunu yeniləməsinin vaxt apara biləcəyi mənasına gəlir.

Google I/O-da müzakirə etdiyimiz bir həll yolu
bu il
dinamik render. Bunu həyata keçirməyin bir çox yolu var. Bu bloq yazısı
Rendertronistifadə edərək dinamik renderin nümunə tətbiqini göstərir, hansı ki, headless Chromium əsaslı açıq mənbəli bir həlldir.

Hansı saytlar dinamik renderi nəzərdən keçirməlidir?

Veb saytınıza daxil olan bütün axtarış motorları və ya sosial media botları JavaScript-i işlədə bilmir. Məsələn, Googlebot
JavaScript-inizi işlətmək üçün vaxt apara bilər vəbəzi məhdudiyyətlərə

sahibdir.
Dinamik render tez-tez dəyişən və göstərilməsi üçün JavaScript tələb edən məzmun üçün faydalıdır. Saytınızın istifadəçi təcrübəsi (xüsusiləilk mənalı boyanma
vaxtı) hibrid renderi (məsələn,).

Angular Universal

) nəzərdən keçirməkdən faydalana bilər.
Dinamik render necə işləyir?

Dinamik render
müəyyən istifadəçi agentləri üçün müştəri tərəfində render edilmiş və əvvəlcədən render edilmiş məzmun arasında keçid etmək deməkdir. JavaScript-i icra etmək və statik HTML yaratmaq üçün bir renderə ehtiyacınız olacaq. Rendertron

headless Chromium

1. istifadə edən açıq mənbəli bir layihədir. Tək Səhifəli Tətbiqlər (SPA) tez-tez məlumatları arxa planda yükləyir və ya məzmunlarını render etmək üçün işi təxirə salır. Rendertronun bir veb saytın renderi nə vaxt tamamladığını müəyyən etmək üçün mexanizmləri var. O, bütün şəbəkə sorğuları bitənə və görüləcək başqa iş qalmayana qədər gözləyir.
2. Bu yazı aşağıdakıları əhatə edir: Nümunə veb tətbiqə nəzər salın Kiçik bir
3. express.js

server qurun

Rendertron-u dinamik render üçün middleware kimi quraşdırın və konfiqurasiya edin
Nümunə veb tətbiq

“kitten corner” veb tətbiqi

API-dən müxtəlif pişik şəkillərini yükləmək üçün JavaScript istifadə edir və onları bir şəbəkədə göstərir.
JavaScript budur:Veb tətbiq müasir JavaScript (ES6) istifadə edir, hansı ki,
hələ Googlebot-da dəstəklənmir . Googlebot-un məzmunu görüb-görmədiyini yoxlamaq üçün

mobil uyğunluq testindən

istifadə edə bilərik:

Bu problemi həll etmək sadə olsa da, dinamik renderi necə quracağınızı öyrənmək üçün yaxşı bir məşqdir. Dinamik render, veb tətbiq kodunda dəyişiklik etmədən Googlebot-un pişik şəkillərini görməsinə imkan verəcək.
Serveri qurun, a Veb tətbiqi xidmət etmək üçün veb serverlər qurmaq üçün
express

node.js
kitabxanasından istifadə edək.
Server kodu belə görünür (tam layihə mənbə kodunu

burada
tapın): Canlı nümunəni
sınaqdan keçirə bilərsiniz – müasir bir brauzer istifadə edirsinizsə, bir çox pişik şəkli görməlisiniz. Layihəni kompüterinizdən işlətmək üçün aşağıdakı əmrləri yerinə yetirmək üçün

node.js
lazımdır:Sonra brauzerinizi

https://localhost:8080

ünvanına yönəldin. İndi dinamik renderi qurmağın vaxtıdır.
Rendertron instansiyasını yerləşdirin
Rendertron bir URL qəbul edən və headless Chromium istifadə edərək həmin URL üçün statik HTML qaytaran bir server işlədir. Biz
Rendertron layihəsinin tövsiyəsinə.

əməl edəcəyik və
Google Cloud Platformistifadə edəcəyik. Qeyd edək ki, ödənişsiz mövcud olan
istifadə səviyyəsi.

1. ilə başlaya bilərsiniz; bu quruluşu istehsal mühitində istifadə etmək
   Google Cloud Platform qiymətlərinəuyğun olaraq xərclərə səbəb ola bilər.
2. Google Cloud konsolunda yeni bir layihə yaradın. Giriş sahəsinin altındakı “Layihə ID”-sini qeyd edin.
   Google Cloud SDK-nı
3. sənədlərdə təsvir edildiyi kimi quraşdırın
4. və daxil olun.
5. Rendertron deposunu GitHub-dan klonlayın: Asılılıqları quraşdırmaq və Rendertron-u kompüterinizdə qurmaq üçün aşağıdakı əmrləri yerinə yetirin: rendertron qovluğunda aşağıdakı məzmunla
6. config.json
   adlı yeni bir fayl yaradaraq Rendertronun keşini aktivləşdirin: rendertron qovluğundan aşağıdakı əmri yerinə yetirin. 1-ci addımdakı layihə ID-nizlə
7. YOUR_PROJECT_ID
8. əvəz edin. Seçdiyiniz bir bölgəni seçin və yerləşdirməni təsdiqləyin. Bitməsini gözləyin. URL-i daxil edin YOUR_PROJECT_ID.appspot.com. Rendertron-un daxiletmə sahəsi və bir neçə düyməsi olan interfeysini görməlisiniz.

Rendertron veb interfeysini gördükdə, öz Rendertron nümunənizi uğurla yerləşdirmisiniz. Layihənizin URL-ini qeyd edin (YOUR_PROJECT_ID.appspot.com) çünki prosesin növbəti hissəsində buna ehtiyacınız olacaq.

Rendertron-u serverə əlavə edin

Veb server express.js istifadə edir və Rendertron-un express.js
middleware-i var. Aşağıdakı əmri server.js faylının olduğu qovluqda icra edin:

Bu əmr rendertron-middleware-i npm-dən quraşdırır ki, onu serverə əlavə edə bilək:

Bot siyahısını konfiqurasiya edin

Rendertron sorğunun botdan, yoxsa istifadəçi brauzerindən gəldiyini müəyyən etmək üçün user-agent HTTP başlığından istifadə edir. Müqayisə üçün
yaxşı saxlanılan bot istifadəçi agentləri siyahısı
var. Standart olaraq bu siyahıya Googlebot daxil deyil, çünki Googlebot JavaScript-i icra edə bilir. Rendertron-un Googlebot sorğularını da render etməsi üçün Googlebot-u istifadəçi agentləri siyahısına əlavə edin:

Rendertron user-agent başlığını daha sonra bu müntəzəm ifadə ilə müqayisə edir.

Middleware-i əlavə edin

Bot sorğularını Rendertron nümunəsinə göndərmək üçün middleware-i
express.js serverimizə əlavə etməliyik. Middleware sorğu göndərən istifadəçi agentini yoxlayır və tanınmış botlardan gələn sorğuları Rendertron nümunəsinə yönləndirir. Aşağıdakı kodu server.js-ə əlavə edin və YOUR_PROJECT_ID -i Google Cloud Platform layihə ID-nizlə əvəz etməyi unutmayın:

Nümunə veb saytına sorğu göndərən botlar statik HTML-i Rendertron-dan alır, beləliklə botların məzmunu göstərmək üçün JavaScript icra etməsinə ehtiyac qalmır.

Quraşdırmamızı sınaqdan keçiririk

Rendertron quraşdırılmasının uğurlu olub-olmadığını yoxlamaq üçün Mobil Uyğunluq Testini yenidən işə salın.

İlk testdən fərqli olaraq, pişik şəkilləri görünür. HTML tabında JavaScript kodunun yaratdığı bütün HTML-i görə bilərik və Rendertron məzmunu göstərmək üçün JavaScript ehtiyacını aradan qaldırıb.

Nəticə

Veb tətbiqində heç bir dəyişiklik etmədən dinamik render quraşdırması yaratdınız. Bu dəyişikliklərlə siz veb tətbiqinin statik HTML versiyasını krolerlərə təqdim edə bilərsiniz.

Paylaşıldı: Martin Splitt, Open Web Unicorn