web-dev-qa-db-fra.com

Next.JS: Comment faire TOUTES les requêtes côté serveur

Je crée une application Next.JS qui obtiendra les données d'une API Python et d'une base de données Postgres).

Normalement, cela serait simple, sauf que les exigences sont telles que je dois envoyer toutes les demandes du côté serveur, pas du client de l'utilisateur.

J'ai travaillé avec et grokking getInitialProps , mais je ne suis pas sûr que ce soit la solution complète dont j'ai besoin à cause de cette ligne dans le README:

Pour le chargement initial de la page, getInitialProps s'exécutera uniquement sur le serveur. getInitialProps ne sera exécuté sur le client que lors de la navigation vers un autre itinéraire via le composant Link ou à l'aide des API de routage.

Il semble que getInitialProps soit conçu pour le chargement initial de la page, et non pour la récupération de données côté serveur ultérieure.

Comment puis-je concevoir mon application Next.JS de manière à ce que toutes les demandes proviennent du côté serveur?

Remarques:

  • Il est normal que chaque demande entraîne essentiellement un chargement de page initial.
  • Il est normal que le client utilisateur réponde au serveur Node (Next.JS) car il est publiquement exposé. J'expérimente actuellement avec un encapsulation de Next.JS dans un express serveur .

Ty à l'avance pour toute aide

javascriptreactjstypescriptserver-sidenextjs
9
AuthorOfTheSurf

J'ai trouvé une solution en encapsulant Next.JS dans Express!

J'ai poussé un exemple de projet simple vers GitHub ici

Le dépôt a un Nice README ainsi que des commentaires dans le code qui détaillent ce qui se passe.

Résumé rapide:

  • Enveloppez Next.JS dans un serveur express. Rendre explicitement les pages en appelant nextApp.render(...), ce qui se produit implicitement dans les applications Next.JS standard. Voir server.js
  • Utilisez le routage express. Faites des requêtes côté serveur avant de rendre les pages avec nextApp.render(...). Voir server.js .
  • Utilisez des balises d'ancrage standard pour garantir que les demandes de pages atteignent le serveur express. Voir index.js
  • nextApp.render fournit des valeurs transmises à la page dans le paramètre contextuel (ctx) de getInitialProps. Vous pouvez rendre ces valeurs disponibles dans les pages this.props en les renvoyant dans getInitialProps. Voir stars.js

Suggestions et améliorations bienvenues!

9
AuthorOfTheSurf

C'est généralement une mauvaise idée.

L'intérêt d'un SPA est d'empêcher le chargement de pages entières.

Vous pouvez utiliser getInitialProps pour récupérer des éléments lors de la demande de page initiale et lors des navigations suivantes, comme il est appelé pour chaque page.

Ensuite, vous encourage à utiliser une API pour parler au serveur

0
Ascherer