FastComments.com Blog

Fri Jan 21 2022
...

FastComments Izdaje Rendering na Serveru

! Ovaj Članak Sadrži Tehnički Žargon

Šta je Novo

Od lansiranja početkom 2020. godine, FastComments je isključivo koristio JavaScript za renderovanje vidžeta za komentare.

Šta ako bismo vam rekli da možete imati skoro sve iste suštinske funkcionalnosti, ali bez korištenja JS-a?

Ovo je snimak ekrana, prestanite pokušavati da kliknete na njega.
SSR Demo

Gore prikazani snimak ekrana je FastComments vidžet za komentare, bez JavaScript-a. Možete pogledati ovu stranicu, bez JavaScript-a, ovde.

Kako To Koristiti

Ako koristite WordPress, FastComments dodatak verzije 3.10.1 automatski dodaje podršku za SSR kao rezervnu opciju za vaše korisnike koji pretražuju bez omogućene JS.

Za prilagođene implementacije, preuzmite UI za nit komentara, jednostavno pozovite /ssr/comments za tu stranicu:

https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url

Gde je $urlId url, ili id, stranice. Dokumentacija o ovome je ovde.

Na primer, sa PHP-om možemo poslati iframe na stranicu koja renderuje nit komentara unutar:

PHP Primer SSR-a
1
2<?php
3$tenantId = rawurlencode("my-tenant-id");
4$urlId = rawurlencode("my-page-url-article-id");
5$url = rawurlencode("my-page-url");
6
7$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
8?>
9<iframe
10 src="<?php echo $fastcomments_url; ?>"
11 horizontalscrolling="no"
12 allowtransparency="true"
13 frameborder="0"
14 title="FastComments"
15 width="100%"
16 height="1500px"
17 style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
18></iframe>
19

Takođe, mogli bismo napraviti API poziv da dobijemo HTML za nit komentara, i renderujemo ili sačuvamo.

Kompletna dokumentacija je dostupna u SSR Dokumentima na docs.fastcomments.com.

SSO

Pošto volimo akronime koji zvuče poslovno, ne brinite, SSR podržava SSO. Primer Single-Sign-On sa SSR je ovde.

Lokalizacija

SSR bazirani endpoint automatski lokalizuje odgovor na osnovu jezičkih zaglavlja koje pregledač šalje. Takođe može koristiti iste lokalizacione override kao vidžet zasnovan na JavaScript-u.

Zašto je Ovo Izgrađeno

Jedna od glavnih primedbi na servise poput FastComments je da zahtevaju JS. Već smo učinili naš vidžet za komentare što je moguće manjim, i osigurali smo da ispunjavamo SLAs za API pozive od < 20ms, ali mnoge manje zajednice neće izabrati takvo rešenje ako to znači dodavanje JS-a na svoju stranicu.

Ovo takođe otvara priliku za korišćenje rendering engine-a koji nemaju pristup JavaScript-u.

Tehnologija

FastComments koristi svoj mali mikroframework za renderovanje UI-a. Ovaj framework koristi sličan pristup React-u, osim što su manuelne manipulacije DOM-om van inicijalnog renderovanja dozvoljene.

Osnovna biblioteka vidžeta za komentare ima jedan ulazni tačku - uzima set stanja i kreira rezultatni HTML i CSS za renderovanje. Ovo jednostavno pozivamo i na serveru. Kada korisnik interaguje sa stranicom, stanje se menja i najnoviji HTML se preuzima. Ovo je izgrađeno kao rezultat hackathona koji se odigrao kao deo novog godine.

Živote Komentarisanja

Pošto se UI renderuje od strane servera, jednom, funkcije live komentarisanja nisu dostupne.

Pored toga, obaveštenja zvono trenutno nije dostupno. Otvoreni smo za dodavanje ove funkcionalnosti u budućnosti.

Performanse

Serverom renderovani UI koristi iste optimizacije skladišta i engine za renderovanje kao vidžet zasnovan na JavaScript-u. Za male niti komentara, performanse su zapravo bolje, jer korisnik ne mora preuzeti skriptu koja zatim preuzima komentare i renderuje UI.

Crawlers i SEO

FastComments već dobro radi sa web crawler-ima; ako je SEO briga, korišćenje SSR nije obavezno.

Buduće Aplikacije

Planiramo lansiranje rešenja za Forume u budućnosti. Tradicionalno, forumi su paginirani i renderovani na serveru. Moderna rešenja za forume se udaljavaju od ove norme korišćenjem beskonačnog skrolovanja i renderovanja na strani klijenta. Ne mislimo da ovo mora biti jedina opcija za korišćenje rešenja foruma treće strane.

Na Zaključku

Nadamo se da ste pronašli ovaj vodič korisnim i lakim za čitanje. Slobodno komentarišite ispod sa bilo kakvim pitanjima.

Živeli!