Fri Jan 21 2022
...
FastComments publie le rendu sur le serveur
! Cet article contient un jargon technique
Quoi de neuf
Depuis son lancement début 2020, FastComments a exclusivement utilisé JavaScript pour rendre le widget de commentaires.
Que diriez-vous si nous vous disions que vous pourriez avoir presque toutes les mêmes fonctionnalités essentielles, mais sans utiliser JS ?
La capture d'écran ci-dessus montre le widget de commentaires FastComments, sans JavaScript. Vous pouvez voir cette page, sans JavaScript, ici.
Comment l'utiliser
Si vous utilisez WordPress, la version 3.10.1 du plugin FastComments ajoute automatiquement le support pour SSR en tant que solution de secours pour vos utilisateurs qui naviguent avec JS désactivé.
Pour des implémentations personnalisées, récupérez l'interface utilisateur d'un fil de commentaires en appelant simplement le /ssr/comments pour cette page :
Où $urlId est l'url, ou l'id, de la page. La documentation à ce sujet est ici.
Par exemple, avec PHP, nous pouvons envoyer un iframe à la page qui rend le fil de commentaires à l'intérieur :
Nous pourrions également faire un appel API pour obtenir le HTML d'un fil de commentaires, et le rendre, ou le stocker.
Une documentation complète est disponible dans les docs SSR sur docs.fastcomments.com.
SSO
Parce que nous aimons les acronymes qui sonnent comme des entreprises, ne vous inquiétez pas, SSR prend en charge SSO. Un exemple de Single-Sign-On avec SSR est ici.
Localisation
Le point de terminaison basé sur SSR localise automatiquement la réponse en fonction des en-têtes de langue envoyés par le navigateur. Il peut également utiliser les mêmes surcharges de localisation que le widget basé sur JavaScript.
Pourquoi cela a été construit
L'une des principales plaintes concernant des services comme FastComments est qu'ils nécessitent JS. Nous faisons déjà en sorte que notre widget de commentaire soit le plus léger possible et garantissons que nous respectons nos SLA d'appels API de < 20 ms, mais de nombreuses petites communautés ne choisiront pas une telle solution si cela signifie ajouter du JS à leur site.
Cela ouvre également la possibilité d'utiliser des moteurs de rendu qui n'ont pas accès à JavaScript.
La technologie
FastComments utilise son propre petit microframework pour rendre l'UI. Ce framework utilise une approche similaire à React, sauf que les manipulations manuelles du DOM en dehors du rendu initial sont autorisées.
La bibliothèque du widget de commentaire a un seul point d'entrée - elle prend un ensemble d'états et crée le HTML et le CSS résultants à rendre. Nous appelons simplement cela sur le serveur aussi. Lorsque l'utilisateur interagit avec la page, l'état est modifié et le dernier HTML est récupéré. Cela a été construit à la suite d'un hackathon qui a eu lieu dans le cadre du Nouvel An.
Commentaires en direct
Comme l'UI est rendue par le serveur, une seule fois, les fonctionnalités de commentaires en direct ne sont pas disponibles.
De plus, la cloche de notifications n'est actuellement pas disponible. Nous serons ouverts à l'ajout de cette fonctionnalité à l'avenir.
Performances
L'interface utilisateur rendue par le serveur utilise les mêmes optimisations de stockage et moteur de rendu que le widget basé sur JavaScript. Pour les petits fils de commentaires, les performances sont en réalité meilleures, car l'utilisateur n'a pas à télécharger un script qui récupère ensuite les commentaires et rend l'UI.
Robots et SEO
FastComments fonctionne déjà bien avec les robots d'exploration ; si le SEO est une préoccupation, l'utilisation de SSR n'est pas nécessaire.
Applications futures
Nous prévoyons de lancer une solution Forum dans le futur. Traditionnellement, les forums sont paginés et rendus côté serveur. Les solutions de Forum modernes s'éloignent de cette norme en utilisant le défilement infini et le rendu côté client. Nous ne pensons pas que cela doive être la seule option pour utiliser une solution de Forum tiers.
En conclusion
Nous espérons que vous avez trouvé ce guide utile et facile à lire. N'hésitez pas à commenter ci-dessous avec des questions.
Santé !