web-dev-qa-db-fra.com

Next.js: récupération des données dans getInitialProps (): côté serveur vs côté client

J'utilise Next.js et j'ai un serveur personnalisé utilisant Express. J'ai une page qui nécessite des données de la base de données.

getInitialProps(), lors de son exécution sur le serveur, pouvait simplement récupérer les données de la base de données et les renvoyer, sans aucun problème. Cependant, getInitialProps() peut également s'exécuter côté client (lorsque l'utilisateur demande initialement une page différente, puis accède à celle-ci). Dans ce cas, comme je suis du côté client, je ne peux évidemment pas simplement récupérer les données de la base de données - je dois utiliser AJAX pour parler au serveur et lui demander de récupérer pour moi.

Bien sûr, cela signifie également que j'ai défini une nouvelle route Express sur le serveur pour gérer cette demande, qui contiendra exactement le même code que la partie côté serveur de getInitialProps(), ce qui est très indésirable.

Quelle est la meilleure façon de gérer cela?

7
ShdNx

Puisqu'aucune bonne solution ne semblait avoir existé, j'ai créé et publié une bibliothèque pour fournir une solution simple et élégante à ce problème: next-express .

5
ShdNx

Dans votre getInitialProps, vous devez effectuer une requête http vers une nouvelle route express qui a votre logique de récupération dans la base de données. Cette logique ne devrait jamais vivre dans la couche d'interface utilisateur.

Cette route doit ensuite être appelée, que vous soyez sur le client ou sur le serveur - vous n'avez pas besoin de faire de branchement de code.

4
tom-james-watson

Faites une API distincte de votre application next.js. Considérez la prochaine application comme un client frontal qui rend les pages sur le serveur.

4
BHBH