Quand utiliser "routage côté client" ou "routage côté serveur"?
Je suis un peu confus à ce sujet et je me sens un peu stupide de poser cette question, mais je veux le comprendre.
Donc, disons que je travaille avec un framework web côté client, comme Backbone, Angular ou Durandal. Ce cadre inclut le routage.
Mais, bien sûr, j'ai toujours un serveur pour les bases de données, etc., ainsi que le routage.
Ma question maintenant est:
Quand utiliser "routage côté client" ou "routage côté serveur"?
Comment décide-t-on si le routage est déjà effectué côté client ou si la demande est d'abord envoyée au serveur Web?
J'ai beaucoup de difficulté à imaginer cela, car le côté client peut effectuer le routage avant que le serveur ne soit au courant de cette requête.
Je serais très reconnaissant si quelqu'un pouvait expliquer comment ces deux systèmes de routage fonctionnent ensemble.
P.S .: Je n'ai pas inclus d'échantillons de code car je ne cherche pas de réponse concernant un cadre particulier, mais concernant le processus de routage en général.
tl; dr:
- avec le routage côté serveur, vous téléchargez une nouvelle page Web entière lorsque vous cliquez sur un lien,
- avec le routage côté client, l'application Web télécharge, traite et affiche de nouvelles données pour vous.
Imaginez que l'utilisateur clique sur un lien simple: <a href="/hello">Hello!</a>
Sur une application Web qui utilise routage côté serveur:
- Le navigateur détecte que l'utilisateur a cliqué sur un élément d'ancrage.
- Il envoie une requête HTTP GET à l'URL trouvée dans la balise
href - Le serveur traite la demande et envoie un nouveau document (généralement HTML) en réponse.
- Le navigateur rejette complètement l'ancienne page Web et affiche celle qui vient d'être téléchargée.
Si l'application Web utilise routage côté client:
- Le navigateur détecte que l'utilisateur a cliqué sur un élément d'ancrage, comme avant.
- Un code côté client (généralement la bibliothèque de routage) intercepte cet événement, détecte que l'URL n'est pas un lien externe, puis empêche le navigateur de faire la demande HTTP GET.
- La bibliothèque de routage affiche alors modifie manuellement l'URL affichée dans le navigateur (à l'aide de l'API d'historique HTML5 ou peut-être d'un hachage d'adresse URL sur les anciens navigateurs)
- La bibliothèque de routage puis modifie l'état de l'application client} _. Par exemple, il peut modifier le composant racine React/Angular/etc en fonction des règles de routage.
- L'application (notamment la bibliothèque MVC, comme React) traite ensuite les changements d'état. Il restitue les nouveaux composants et, si nécessaire, demande de nouvelles données au serveur. Mais cette fois, la réponse ne correspond pas nécessairement à une page Web entière. Il peut également s'agir de données "brutes". Dans ce cas, le code côté client le transforme en éléments HTML.
Le routage côté client semble plus compliqué, car il l'est. Mais certaines bibliothèques facilitent vraiment les choses ces jours-ci.
Il existe plusieurs avantages du routage côté client: vous téléchargez moins de données pour afficher un nouveau contenu, vous pouvez réutiliser des éléments DOM, afficher des notifications de chargement pour l'utilisateur, etc. Cependant, les applications Web générant le DOM sur le serveur sont beaucoup plus faciles à analyser moteurs), facilitant ainsi l'optimisation du référencement. La combinaison de ces deux approches est également possible, l'excellent Flow Router SSR en est un bon exemple.
Je pense que l'acheminement côté client est utilisé par des applications d'une seule page, où le site actuel n'est jamais quitté.
Le routage fonctionne en attachant à la page en cours, où les infrastructures de routage côté client réagissent.
index.html #/mysubpage
Le routage côté serveur est similaire à ce que Apache fait par défaut lorsque vous appelez un sous-site par son URL, mais node.js le fait en utilisant des itinéraires, car les fichiers HTML doivent d'abord être rendus.
Si vous avez un SPA avec une infrastructure de routage côté client et que vous utilisez Node.js, vous avez toujours besoin d'un routage côté serveur pour basculer entre les sites.
Les applications modernes utilisent souvent le routage côté client et côté serveur de manière "mixte" ou "hybride". Il est donc assez difficile de tracer une ligne de démarcation entre ces deux techniques.
Pour mieux comprendre when et how à utiliser le routage côté serveur et le routage côté client, vous devez probablement comprendre ce qu'il se passe lorsque vous utilisez une application volumineuse utilisée pour gérer une grande entreprise de fabrication. (Cela n'arrive PAS très souvent dans le monde réel. Ce n'est qu'un exemple utile).
Dans ces cas, vous aurez probablement différentes personnes (avec différents rôles) qui verront différentes parties de cet environnement complexe (différents aspects ou domaines). Par exemple, un ingénieur verrait un serveur de fichiers contenant de nombreux documents numériques, tandis que les employés de la cantine de l'entreprise verraient le menu à préparer, l'horaire de travail et le magasin. Ce sont des "domaines" d'application totalement différents qui nécessitent des interfaces utilisateur totalement différentes. Il est donc logique de servir différents SPA à chaque type d'utilisateur.
Dans ce cas, vous pouvez utiliser le routage côté serveur pour servir une interface utilisateur spécifique (SPA) à un utilisateur spécifique, tandis que vous pouvez utiliser le routage côté client pour naviguer dans cette interface utilisateur (et pour charger Les données). Pensez à ces SPA en tant que "tableaux de bord" ou "tableaux de bord" consacrés à des "tâches" spécifiques et utilisés par des types spécifiques de "professionnels".
Par exemple, vous pourriez avoir un itinéraire/myapp/engineering pour tous les ingénieurs et un/myapp/cantine pour tout le personnel de votre cantine. Chacune de ces URL représenterait un domaine spécifique et servirait un dashboard spécifique à un type spécifique de utilisateur. Ces URL seraient gérées côté serveur.
Au lieu de cela, vous utiliseriez client-side pour router naviguer à l'intérieur de chacun de ces dashboard, pour charger des données et reconfigurer l'interface utilisateur selon les besoins.
Bien entendu, votre application disposerait probablement également d'une API RESTful utilisée par vos SPA pour récupérer les données dont ils ont besoin. Les URL appartenant à l'API REST doivent être gérées côté serveur pour effectuer leur travail (même si elles ne sont PAS associées à de vraies pages HTML) et ne sont appelées que par vos SPA "en coulisses". Ils sont généralement conservés dans un "domaine" séparé comme/myapp/api.
Il en va de même avec les pages Web statiques (telles que les pages "contacts" et "à propos de") généralement conservées dans un dossier/myapp/static (ou "domaine") et le côté serveur géré (ce dossier ou "domaine" peut être - et est souvent - hébergé sur un autre serveur).
Vous devriez donc probablement utiliser le routage côté serveur vers des domaines d'applications distincts et le routage côté client vers naviguer à l'intérieur de chaque domaine.