Comment les itinéraires Express et React fonctionnent-ils sur la demande GET initiale du navigateur?

Je pense que l'écart fondamental avec lequel vous vous débattez provient du fait que beaucoup de ces `` cours d'introduction '' poussent l'ensemble du client du navigateur dans le serveur d'applications pour que les choses soient rapidement opérationnelles, car le serveur Node rend l'ensemble de React app AND fonctionne comme une API ...

 // Ajax request from React app to: http://example.com/api

app.use('/api/*'),()=> {
   res.send({ <!-- some JSON object -->})
})

// User visits in browser: http://example.com/**/*     

app.use('/*',()=>{
   res.render(<!-- entire React App sent to browser -->)
})

La première requête (en supposant que l'utilisateur ne visite pas / api / *) enverra simplement le bundle React. Une navigation supplémentaire de l'utilisateur dans le client enverrait généralement des requêtes XHR (ou ouvrirait des WebSockets) depuis l'application React vers des routes Express s'exécutant sur le même programme de nœud.

Dans de nombreuses situations, il est logique de séparer ces parties de votre programme, par exemple en ayant réagi depuis un emplacement complètement différent de celui où il demande des données. Il y a de nombreuses raisons à cela, mais l'optimisation des ressources informatiques en fonction de leurs différentes demandes de CPU, de mémoire, de réseau .etc et de la gérabilité du code / du déploiement sont les principales raisons pour moi.

Par exemple ...

• Visites des utilisateurs: http://example.com *

  1. Nginx, Apache, un «proxy cloud» .etc dirigent le trafic vers un bundle React statique, qui n'a pas d'authentification et n'entre jamais en contact avec votre serveur Node.
  2. Si l'utilisateur a déjà authentifié, il aura un jeton dans le stockage local (si vous utilisez des JWT pour l'authentification) et votre application React sera configurée pour toujours vérifier ces jetons lors de son premier chargement. li >
  3. Si l'utilisateur a un jeton, il enverra une requête Ajax en arrière-plan avec le jeton comme porteur d'en-tête et renverra les données utilisateur, puis les redirigera vers une «page authentifiée» comme le flux FB que vous mentionnez. li>
  4. S'ils n'ont pas de jeton ou si l'authentification par jeton échoue, React les redirigera vers la page de connexion ou d'inscription

Réagissez en gros à la fonctionnalité native de «localisation» du navigateur (ce qui est affiché après votre nom de domaine). Ainsi, tous les événements après le chargement initial de la page (clics sur les boutons et autres) sont entièrement gérés par React en interne et utilisent ces itinéraires pour déterminer ce qu'il faut afficher ou quelles données récupérer de l'API via Ajax (XHR).

Si l'utilisateur effectue un rechargement dur de la page, cette demande reviendra au serveur et il recommencera tout le cycle

Réagir le routeur

Autorise vous faire 2 choses simultanément ...

1. Manipuler le navigateur Emplacement et Objets History .
2. Utilisez ces informations d'historique et de localisation ailleurs en détectant les modifications et en envoyant des événements.

Je n'ai joué qu'avec SSR pour pouvoir lui parler, mais il offre une latence extrêmement faible pour les rendus initiaux, en le faisant en 1 requête réseau, vous voulez donc l'utiliser dans les zones de votre programme où cela est important.

Je ne sais pas si cela répond à votre question, mais faites-moi savoir si vous souhaitez que je développe quelque chose ou que j'en donne plus ressources détaillées.

Je comprends votre combat car j'ai dû le traverser moi-même en combinant front-end et back-end, en particulier React et Node. Donc, tout d'abord, nous savons que le navigateur / client lancera toujours une requête au serveur, alors comment React Router prend-il le contrôle des routes? Eh bien, c'est simple en fait, tout ce que vous avez à faire est de renvoyer l'intégralité de l'application de réaction depuis n'importe quel itinéraire depuis votre serveur express. Le code ressemblera à ceci:

app.get('/api/v1/*', (req, res, next) {
  // Return some data in json format 
});

Une fois que l'application react s'affiche sur le navigateur de l'utilisateur (ne vous inquiétez pas des chemins, car react sera automatiquement rendu en fonction de l'URL en fonction du code que vous écrit côté client, il se chargera également de l'authentification par rapport à la page de flux lorsqu'il analysera votre stockage local, les cookies, etc.), il prendra le contrôle du routage, au lieu d'une requête allant au serveur express. Mais que se passe-t-il lorsque nous demandons des données à notre serveur, eh bien, cela renvoie l'application react sur chaque route, nous devons donc configurer une route api pour gérer toutes les demandes de données.

const express = require('express');
const app = express();

app.get('/*', (req, res, next) => {
  // Return React App index.html
});

app.listen(3000);

Espérons que, cela vous donne un aperçu de ce que vous recherchiez.