Comprendre le rendu côté serveur

Dans cet article, nous allons en apprendre davantage sur le rendu côté serveur, sur la nature de cette technique et sur les raisons pour lesquelles nous devrions en tenir compte lorsque nous créons de nouvelles applications. Nous allons apprendre à tirer parti des applications rendues au niveau du serveur, notamment en améliorant notre référencement et en facilitant l'indexation de nos pages par Google.

Le rendu côté serveur n'est pas une nouvelle technique, mais beaucoup de monde. Je ne comprends pas les concepts sous-jacents, comment cela peut nous être utile, pourquoi nous devrions l'utiliser, et où et quand devrions-nous utiliser cette technique pour obtenir une meilleure expérience utilisateur.

Donc, tout d'abord, lisons une brève introduction à propos de Quelques concepts à comprendre: TTFB et SEO. Nous aurons ensuite une brève introduction au rendu côté client, la manière standard de créer des applications depuis le début du développement Web. Enfin, nous en apprendrons davantage sur le rendu côté serveur et ses avantages.

Introduction

Depuis le début du Web, nous avons toujours créé de nouvelles techniques et amélioré les anciennes. Avec les applications, nous modifions nos façons d'améliorer notre travail et d'obtenir de meilleurs résultats pour nos utilisateurs. Au début, lorsque nous avons commencé à créer des applications utilisant uniquement du HTML et du CSS bruts – et un peu de jQuery -, nous n'avions pas beaucoup de termes et de techniques que nous avons aujourd'hui. Nous ne savions rien du rendu côté serveur et pendant longtemps nous ne savions même pas que c'était possible. Nous étions plus inquiets à propos de la fourniture de nouvelles fonctionnalités, sans nous préoccuper de la performance UX / UI ou des applications. Mais à un moment donné, cela devenait inviable et nous devions commencer à réfléchir à ces concepts.

Étant donné que les performances de nos applications n’étaient plus un problème, nous n’avions pas commencé à améliorer nos techniques pour créer de meilleures applications. Mais c’est aujourd’hui l’une de nos principales préoccupations (nous nous efforçons toujours d’améliorer les performances des applications), ce qui nous a poussés à créer de nombreuses techniques ces dernières années, telles que le rendu côté serveur.

J'ai récemment essayé de créer une application JavaScript, en utilisant n'importe quel type de framework ou de bibliothèque largement utilisé – comme React, Vue, Angular -. Vous savez que deux des points les plus douloureux à son sujet sont Time to First Byte ( TTFB) et le célèbre SEO (Search Engine Optimization) .

Une personne effectue une recherche sur votre site Web sur Google, puis lorsque l'utilisateur clique sur le lien pour accéder à votre site Web, le navigateur Internet demande informations du serveur pour les afficher à l'utilisateur. Le délai jusqu'au premier octet (TTFB) correspond au nombre de millisecondes qu'il faut au navigateur pour recevoir le premier octet de la réponse de votre serveur Web. C’est l’une des mesures les plus importantes que vous pouvez mesurer sur votre site Web, car si vous avez un TTFB plus élevé sur votre site Web, le rendu du site Web à votre utilisateur sera plus long, ce qui peut signifier qu’ils quittent votre site Web. , vous laissant les mains vides et sans utilisateur.

Un autre point important pour disposer d’un bon TTFB est que Google l’utilise comme indicateur de classement. En ayant un bon classement sur Google, tout le monde sait que vous pouvez obtenir plus de trafic et également générer plus de prospects vers votre site Web.

Après avoir créé votre application, lorsque vous la déployez, les premiers utilisateurs accédant à votre site Web et Enfin, pour tester le résultat de beaucoup de travail et de créativité, obtenir du trafic reste l’un des points les plus difficiles. Certaines personnes aiment payer pour le trafic. Vous pouvez utiliser Google Ads pour cela, pour qu'une campagne soit diffusée sur un créneau spécifique et génère du trafic sur votre site Web.

Lorsque vous créez une nouvelle application Web, commencez à bénéficier de produits organiques et non rémunérés. le trafic du moteur de recherche – principalement Google – nous avons besoin d’un bon SEO (Search Engine Optimization) . Le référencement consiste essentiellement à optimiser votre site Web afin d’obtenir un rang plus élevé sur le moteur de recherche, d’obtenir un trafic plus organique et non rémunéré, en apportant des modifications à la conception et au contenu de votre site Web pour en faire un site plus attrayant. Ce processus d'optimisation de votre site Web pour un meilleur référencement peut devenir assez complexe, et il peut prendre beaucoup de temps et d'efforts pour obtenir le meilleur référencement sur votre application afin d'obtenir un meilleur classement sur le moteur de recherche.

Mais vous vous demandez peut-être Maintenant, qu'est-ce que ces deux points – TTFB et SEO – ont à voir avec le rendu côté serveur. Eh bien tout! Étant donné que nous essayons de créer de puissantes applications Web et d’améliorer la qualité de l’utilisateur, nous devons disposer d’un TTFB décent, ne pas tarder à restituer le contenu à l’utilisateur et disposer d’un bon référencement pour bien figurer sur Google classé signifie plus de trafic organique, ce qui peut signifier plus de prospects.

Apprenons-en un peu plus sur le rendu côté client, puis sur le rendu côté serveur afin de mieux comprendre les différences.

Rendu côté client [19659005] Si vous travaillez dans le développement Web et créez des applications Web au cours des dernières années, il est fort probable que vous ayez créé des applications rendues côté client sans vous en rendre compte. C’est devenu le moyen standard de créer des applications et nous en avons beaucoup tiré profit. Cependant, nous devons prendre en compte certains points pour comprendre si le rendu côté client est la meilleure approche pour notre application, car nous en comprenons et évaluons ses problèmes fondamentaux.

Lorsque vous créez des applications Web JavaScript, tout cadre ou toute bibliothèque peut être utilisé ici à titre d'exemple – vous restituez du contenu de navigateur à l'aide de JavaScript. En gros, vous recevez votre document HTML et JavaScript vous aidera à rendre l’application. C’est essentiellement le concept de rendu côté client: les données sont extraites du serveur et traitées par le navigateur pour être affichées à l’utilisateur.

Image de ReactPWA

Cela signifie que le rendu de votre page dépend entièrement de l'utilisateur, en fonction du type de connexion réseau qu'il utilise actuellement et du périphérique utilisé. Imaginons qu’ils utilisent un smartphone et qu’ils utilisent une connexion réseau 3G lente. Si l'application est trop lourde, le rendu de la page prendra beaucoup de temps.

Certains des inconvénients de l'utilisation du rendu côté client sont les suivants:

• TTFB (Time to First Byte) et Performance . – Pour la plupart des gens, l'un des points les plus pénibles des applications rendues côté client est la performance. Alors que les pages des applications rendues côté serveur sont prêtes à être restituées, les applications rendues côté client chargent un navigateur avec un document vide en attendant que JavaScript vous aide à afficher la page. Vous pouvez toujours avoir une application Web très rapide, mais vous devrez faire attention à quelques détails mineurs pour atteindre ce niveau d'interaction et de performances dans votre application.

• ** SEO (Search Engine Optimization) ** – Le référencement reste l’un des inconvénients de la création d’une application côté client. Vous pouvez obtenir un bon niveau de référencement dans votre application avec une application rendue côté client, mais le temps et les efforts que vous devez déployer pour y parvenir sont considérables.

• Préoccupations – Si vous êtes Si vous envisagez de créer une application Web rendue côté client, vous devez attacher certaines préoccupations et points sur lesquels vous devez porter une attention particulière afin de créer une application Web agréable et bien rendue avec le client, telle que lier, transpiler, lisser, coder. division, chargement paresseux, etc.

Ce n'est qu'un bref aperçu des inconvénients du rendu côté client, mais cela ne signifie pas que vous ne devriez jamais l'utiliser. Vous devez envisager ce que vous pouvez et souhaitez réaliser dans votre application, définir un plan et la bonne technique, et continuer.

Les applications rendues côté client sont largement utilisées de nos jours et ne mourront pas de si tôt. . Maintenant que nous en savons un peu sur le rendu côté client, étudions enfin le rendu côté serveur.

Rendu côté serveur

Lorsque nous avons une application rendue côté client, nous savons que notre application est rendue le client. Comme vous pouvez le supposer, le concept de rendu côté serveur est l'inverse: votre page est prête à être restituée par le serveur, sans que le client ait à attendre quoi que ce soit.

Chaque fois que l'utilisateur entre dans une application rendue côté serveur, le client demandera les informations pour le serveur et le serveur fournira la page entièrement chargée au client. Tout d'abord, l'application sera rendue en tant que HTML brut et CSS, pour rendre la première vue à l'utilisateur. Ensuite, pendant le rendu du DOM, l'application sera analysée et initialisée. L’application sera alors entièrement chargée et l’utilisateur pourra interagir.

Image de ReactPWA

C’est l’une des plus belles choses concernant le rendu côté serveur: vous n'avez pas besoin d'attendre que JavaScript charge le contenu pour vous, le serveur le fait déjà. Comme vous pouvez l'imaginer, le rendu côté serveur présente de nombreux avantages, notamment:

• Performances – Votre contenu est totalement chargé côté serveur, ce qui signifie que vous pouvez gagner des millisecondes, voire des secondes, supplémentaires et précieuses. tout en rendant votre application.

• SEO – Le contenu est totalement explorable par Google – ou tout autre moteur de recherche – entraînant un meilleur classement et un trafic plus organique et impayé sur votre application.

• Charger l'application sans JavaScript – Si un utilisateur essayait de charger l'application sans activer JavaScript, cela ne poserait pas de problème, car tout le contenu est chargé côté serveur.

Ce ne sont là que quelques-uns des Les avantages que vous pouvez obtenir avec le rendu côté serveur, mais cela entraîne également des coûts. Lorsque vous commencez à créer une nouvelle application, il est très important que vous définissiez le type d'application que vous souhaitez et que vous définissiez les points les plus importants à atteindre pour que votre expérience soit la plus authentique et la plus équilibrée possible. client.

Conclusion

Dans cet article, nous avons appris le fonctionnement des navigateurs et à propos de paramètres importants pour les moteurs de recherche, tels que Time to First Byte (TTFB) et SEO (Optimisation des moteurs de recherche). ) . De plus, pour comprendre le rendu côté serveur, nous avons découvert le rendu côté client. Le rendu côté serveur est essentiellement la technique permettant de renvoyer la page entière rendue à partir du serveur, et nous avons compris les avantages d'une application plus performante et plus performante.