Fri Jan 21 2022
...
FastComments brengt Server-Side Rendering uit
! Dit Artikel Bevat Technisch Jargon
Wat is Nieuw
Sinds de lancering in het begin van 2020 heeft FastComments uitsluitend JavaScript gebruikt om de comment widget weer te geven.
Wat als we je vertellen dat je bijna alle dezelfde essentiële functionaliteit kunt hebben, maar zonder JS te gebruiken?
De bovenstaande screenshot is de FastComments comment widget, zonder JavaScript. Je kunt deze pagina bekijken, zonder JavaScript, hier.
Hoe te Gebruiken
Als je WordPress gebruikt, voegt de FastComments plugin versie 3.10.1 automatisch ondersteuning voor SSR toe als een fallback voor jouw gebruikers die met JS uitgeschakeld browsen.
Voor aangepaste implementaties, haal de UI voor een comment thread op, door simpelweg de /ssr/comments voor die pagina aan te roepen:
Waarbij $urlId de url, of id, van de pagina is. Documentatie hierover is hier.
Bijvoorbeeld, met PHP kunnen we een iframe naar de pagina sturen die de comment thread binnenin weergeeft:
We kunnen ook een API-aanroep doen om de HTML voor een comment thread op te halen, en deze weergeven of opslaan.
Volledige documentatie is beschikbaar in de SSR Docs op docs.fastcomments.com.
SSO
Omdat we van enterprise-klinkende acroniemen houden, maak je geen zorgen, SSR ondersteunt SSO. Een voorbeeld van Single-Sign-On met SSR is hier.
Lokalisatie
De SSR-gebaseerde endpoint lokaliseert automatisch de reactie op basis van de taalgerelateerde headers die de browser verzendt. Het kan ook dezelfde lokalisatie overschrijvingen gebruiken als de op JavaScript gebaseerde widget.
Waarom Dit Gebouwd Is
Een van de belangrijkste klachten over diensten zoals FastComments is dat ze JS vereisen. We maken onze comment widget al zo klein mogelijk en zorgen ervoor dat we voldoen aan onze API-aanroep SLA's van < 20ms, maar veel kleinere gemeenschappen zullen zo'n oplossing niet kiezen als dat betekent dat ze JS aan hun site moeten toevoegen.
Dit opent ook de mogelijkheid om rendering engines te gebruiken die geen toegang tot JavaScript hebben.
De Technologie
FastComments gebruikt zijn eigen kleine microframework voor het weergeven van de UI. Dit framework gebruikt een vergelijkbare aanpak als React, behalve dat handmatige DOM-manipulaties buiten de oorspronkelijke render toegestaan zijn.
De kern comment widget bibliotheek heeft een enkele toegangspunt - het neemt een set van status en creëert resulterende HTML en CSS die moet worden weergegeven. We roepen dit simpelweg ook op de server aan. Wanneer de gebruiker met de pagina interacteert, wordt de status gewijzigd en de laatste HTML opgehaald. Dit is gebouwd als resultaat van een hackathon die plaatsvond als onderdeel van het nieuwe jaar.
Live Commentaar
Aangezien de UI door de server wordt weergegeven, één keer, zijn live commentaar functies momenteel niet beschikbaar.
Daarnaast is de notificatiebel momenteel niet beschikbaar. We staan open voor het toevoegen van deze functie in de toekomst.
Prestaties
De server-gegenereerde UI gebruikt dezelfde opslagoptimalisaties en rendering engine als de op JavaScript gebaseerde widget. Voor kleine comment threads, is de prestatie eigenlijk beter, omdat de gebruiker geen script hoeft te downloaden dat vervolgens de opmerkingen ophaalt en de UI weergeeft.
Crawlers en SEO
FastComments werkt al goed met web crawlers; als SEO een zorg is, is het gebruik van SSR niet vereist.
Toekomstige Toepassingen
We zijn van plan in de toekomst een Forum oplossing te lanceren. Traditioneel worden forums gepagineerd en server-side gerenderd. Moderne Forum oplossingen stappen weg van deze norm door gebruik te maken van oneindige scroll en client-side rendering. We denken niet dat dit de enige optie moet zijn voor het gebruik van een derde partij Forum oplossing.
Conclusie
We hopen dat je deze gids nuttig en makkelijk te lezen hebt gevonden. Voel je vrij om hieronder te reageren met eventuele vragen.
Proost!