Quels avantages confèrent l'utilisation du rendu de page côté serveur?


19

Je développe une application web et j'ai actuellement écrit le site web entier en html / js / css et sur le backend j'ai des servlets qui hébergent certains services RESTFUL. Toute la logique de présentation se fait en obtenant des objets json et en modifiant la vue via javascript.

L'application est essentiellement un moteur de recherche, mais elle aura des comptes d'utilisateurs avec des rôles différents.

J'ai fait des recherches sur certains cadres tels que Play et Spring. Je suis relativement nouveau dans le développement Web, alors je me demandais quels avantages offrirait le rendu des pages côté serveur?

Est-ce: la vitesse? Développement et workflow plus faciles? Accès aux bibliothèques existantes? Plus? Tout ce qui précède?


4
La sécurité est importante. En particulier lorsque l'application est dynamique et doit communiquer avec une base de données.
Odé le

2
@Oded - Pourquoi la sécurité est-elle plus facile à faire lorsque vous affichez la page par rapport à l'API? J'ai toujours pensé que ce que vous devez programmer est équivalent dans les deux cas, mais il est plus facile (au moins pour moi) psychologiquement de ne pas faire confiance au client lorsque vous faites une API. Je demande parce que si j'oublie quelque chose, je veux vraiment savoir.
psr

1
@psr Il ne fait peut-être pas autant référence à la sécurité des données qu'à la sécurité des utilisateurs (ex. exploits MITM). Mais juste une supposition.
maple_shaft

1
@psr - D'accord. Cependant, hier, j'ai répondu à une question où l'OP avait la chaîne de connexion intégrée dans JS ...
Oded

1
@maple_shaft - MITM est quelque chose à penser, mais encore une fois, je ne sais pas pourquoi cela fait une différence pour l'API par rapport au HTML généré par le serveur. Je suppose qu'une API est plus pratique à programmer, donc ce serait une fissure légèrement plus facile, mais je doute que c'est ce que vous voulez dire.
psr

Réponses:


16

Rendu HTML côté serveur:

  • Rendu de navigateur le plus rapide
  • La mise en cache des pages est possible comme une amélioration rapide et sale des performances
  • Pour les applications "standard", de nombreuses fonctionnalités de l'interface utilisateur sont préconfigurées
  • Parfois considéré comme plus stable car les composants sont généralement soumis à une validation au moment de la compilation
  • S'appuie sur l'expertise backend
  • Parfois plus rapide à développer *

* Lorsque les exigences de l'interface utilisateur correspondent bien au cadre.


Rendu HTML côté client:

  • Utilisation de bande passante réduite
  • Rendu de page initial plus lent. Peut même ne pas être perceptible dans les navigateurs de bureau modernes. Si vous devez prendre en charge IE6-7, ou de nombreux navigateurs mobiles (le webkit mobile n'est pas mauvais), vous pouvez rencontrer des goulots d'étranglement.
  • Construire l'API d'abord signifie que le client peut tout aussi bien être une application propriétaire, un client léger, un autre service Web, etc.
  • S'appuie sur l'expertise JS
  • Parfois plus rapide à développer **

** Lorsque l'interface utilisateur est largement personnalisée, avec des interactions plus intéressantes. De plus, je trouve que le codage dans le navigateur avec du code interprété est beaucoup plus rapide que d'attendre les compilations et les redémarrages du serveur.


Vous pouvez également envisager un modèle hybride avec une implémentation légère de backend utilisant un système de modèles front-end / back-end comme la moustache .


1
Whoah, complètement oublié les possibilités de mise en cache!
Michael K

"Pour les applications" standard ", de nombreuses fonctionnalités de l'interface utilisateur sont prédéfinies" Ce n'est pas pertinent, le serveur et le client l'ont.
Raynos

@Raynos Il n'avait pas mentionné l'utilisation d'un framework côté client , mais s'il en utilise un, c'est un bon point.
peteorpeter

1
Merci, c'est surtout la réponse que je cherchais. Je n'ai pas fait trop avec les frameworks côté client, mais je faisais des recherches sur dust.js en fonction du choix de LinkedIn. Je sais que la moustache est une alternative, mais je vais la rechercher davantage. Je ferai probablement une sorte d'hybride, principalement je voudrais pousser les choses côté serveur si cela peut améliorer les performances. Merci encore.
user1303881

Je ne considérerais pas vraiment un élément du "rendu HTML côté client" comme un avantage. "Parfois plus rapide à développer" passe une fois de plus à côté des navigateurs à la pointe de la technologie (IE 8, etc.).
null

3

génération HTML côté serveur:

  • plus facile à déboguer;
  • aucun problème avec la compatibilité du navigateur;
  • avec la génération classique côté serveur pleine page, il est plus difficile de mettre en cache HTML, même s'il comporte de grandes parties invariables; (la solution consiste à récupérer des fragments HTML via des appels AJAX);
  • ne pas tirer parti des procurations de mise en cache et des CDN pour le HTML dynamique;

génération HTML côté client:

  • plus difficile à déboguer;
  • certains problèmes avec les navigateurs obsolètes;
  • aucun problème de mise en cache côté client des modèles HTML;
  • tirer parti des procurations de mise en cache et des CDN pour les modèles HTML et le code JS;
  • utilisation du réseau beaucoup plus faible;

Notez que la génération côté client est la façon dont cela se fait en cas de sites mobiles réussis, car apparemment, c'est beaucoup plus efficace avec les navigateurs modernes (les navigateurs basés sur WebKit ont environ 70 à 80% du marché mobile).

LinkedIn a un article sur les avantages de l'approche côté client utilisant dust.js comme exemple: "Laisser les JSP dans la poussière: déplacer LinkedIn vers les modèles côté client dust.js"


1
+1 sur les smartphones modernes ( en utilisant principalement mobile webkit), JS ne risque pas de goulot d' étranglement, alors que la bande passante réseau cellulaire est .
peteorpeter

1

Cela dépend de vos besoins. Si vous avez besoin d'une solution hautes performances à faible latence qui dépend de nombreuses petites tâches, vous pouvez opter pour une structure similaire à ce que vous décrivez. Cependant, les solutions les plus courantes, en Java, PHP et C #, ne le font pas par défaut.

La plupart des applications Web dépendent fortement des bases de données - la plupart d'entre elles à tel point que les pages ne peuvent pas s'afficher sans au moins un appel. Évidemment, vous ne voulez pas exposer votre base de données publiquement, pour plusieurs raisons:

  • Sécurité (comme le mentionne Oded ) - vous ne voulez certainement pas exposer votre réseau publiquement! Idéalement, la seule interface vers vos systèmes depuis l'extérieur devrait être https vers votre serveur.
  • Facilité de développement - vous ne voulez vraiment, vraiment , vraiment pas écrire SQL en Javascript, et les langages conçus pour la présentation Web ne fonctionnent pas bien avec les RDB. Ils n'ont pas de concept d'État, par exemple.

Donc, lorsque vous avez besoin d'une base de données, vous utilisez des langages qui fonctionnent bien avec eux comme Java, C #, PHP, etc. La façon la plus simple de générer une page se présente comme suit: mais JSP et ASP sont deux autres langages très courants) pour construire la page. Le langage fournit des constructions qui appellent d'autres modules. En PHP, c'est généralement dans la page ou dans un autre fichier PHP, en utilisant le modèle MVC. Dans JSP, vous utilisez des scriptlets ou le langage d'expression JSP. Ces autres modules peuvent effectuer le gros travail de connexion à la base de données, d'exécution de la logique et de retour de valeurs à votre couche de vue. Le résultat final est une page HTML générée, rendue sur le serveur et envoyée au client.

Lorsque votre base de données se trouve sur le même réseau que votre moteur de rendu de page, vous obtenez également de meilleures performances. Le client n'a qu'à faire une seule demande et reçoit une page - vous devrez peut-être faire 10 à 15 demandes de base de données avant d'avoir toutes les informations dont l'utilisateur a besoin. Une latence de quelques millisecondes sur votre réseau serait de quelques secondes à quelques minutes si le client devait tout faire.

Lorsque les systèmes s'agrandissent, la séparation des préoccupations et des compétences de base devient cruciale. Le HTML est bon pour l'affichage. Javascript est bon pour le contenu dynamique. SQL est idéal pour interroger une base de données, et d'autres langages sont bons en logique métier. Notre travail de développeur est d'utiliser tous les outils à notre disposition pour construire un système maintenable. Facilité de développement est une grande partie d'un bon système. Dans mon esprit, c'est presque aussi important que les performances et la convivialité. Les grands systèmes évoluent avec le temps. Les mauvais systèmes ont été mal écrits dès le départ et n'ont jamais été améliorés.


you can't write SQL in Javascript Vraiment?! Avez-vous déjà examiné les questions StackOverflow pour Javascript? Je prie malheureusement de différer. Certes, c'est la pire chose que vous puissiez faire dans le code client, mais ...
maple_shaft

... j'ai aussi oublié Node.JS, mais c'est le serveur JS qui est un animal complètement différent.
maple_shaft

Apparemment, vous pouvez - TIL! Mais ... wow, cependant. Mais parlez d'abus de la langue!
Michael K

2
L'interface REST est la façon dont le client accède actuellement aux données de la base de données via des objets json. Elle n'expose pas tout et cette application fait partie d'un réseau d'entreprise privé. L'un des avantages des interfaces est la possibilité pour d'autres applications de l'entreprise de tirer parti de tout service souhaité. Du point de vue du développement, je peux laisser les développeurs frontaux faire ce qu'ils veulent dans html / js / css, puis ils peuvent simplement envoyer une requête ping à l'interface RESTful conçue par les développeurs java. Cependant, la plupart d'entre nous ont un ensemble de compétences mixtes et cette division peut ne pas être nécessaire.
user1303881

3
-1: @MichaelK: vous discutez avec un homme de paille que vous avez imaginé, mais n'a absolument rien à voir avec la vraie vie. RESTful utilise HTTP. Personne n'a besoin d'écrire SQL dans JS, c'est à cela que sert l'interface RESTful. RESTful ne signifie pas non plus qu'il existe un mappage 1 à 1 avec des requêtes DB. Votre réponse était peut-être valable dans les années 1990, mais nous sommes en 2012 maintenant.
vartec

0

Les clients mobiles sont généralement limités en termes de puissance, de bande passante et de mémoire. Il est probablement préférable de leur rendre des pages sur le serveur.

Pour les clients de bureau, vous pouvez envisager d'envoyer js + json pour rendre la page sur le client, la rendre dynamiquement actualisable, etc.


Dans la pratique, cependant, l'exact opposé est souvent vrai. En fait, le projet jQuery Mobile est entièrement basé sur l'idée du rendu côté client.
Pointy

@Pointy: oui, cela peut être l'inverse. Il faut tester comment certaines pages se comportent sur des clients particuliers. Fournir un lien vers une alternative (comme les liens de version «mobile» et «bureau») peut également être utile pour l'utilisateur.
9000

Aujourd'hui, le mobile se caractérise beaucoup plus par une latence élevée que par une faible bande passante ou puissance de traitement. Dans le projet sur lequel j'ai travaillé récemment, nous étions plus préoccupés par la taille de la page que par la vitesse de rendu - les téléphones modernes sont plutôt bons.
Michael K

@Pointy le projet jQuery Mobile est également un gros tas de code horrible qui ne devrait pas être utilisé. Popularité! == valeur
Raynos

@Raynos Nous utilisons actuellement Jquery Mobile, avec un très bon succès également. Savez-vous quelque chose que nous ignorons? ;)
Michael K

0

Un énorme avantage du rendu côté serveur est l'accessibilité - les applications basées sur javascript sont toujours un gros problème pour les personnes sans vue. Cela et il y a ce gars aveugle appelé "googlebot" à qui vous pourriez vouloir répondre. Il ne fait pas aussi bien le javascript.


Bon point, bien que cette application ne nécessite pas de référencement car elle est privée, je développe également des applications personnelles et c'est une considération dans ce domaine.
user1303881

Googlebot interprète JS / AJAX depuis un certain temps: searchenginewatch.com/article/2122137/…
vartec

@vartec: Je pense que la phrase clé de cet article est "peut maintenant lire et comprendre certains commentaires dynamiques implémentés via AJAX et JavaScript." Mon soupçon est qu'il couvre les disqus et facebook mais pas votre configuration ajax personnalisée.
Wyatt Barnett du
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.