web-dev-qa-db-fra.com

Comment puis-je utiliser GetinitialProps uniquement lors de la construction du site NEXTJS?

Lorsque vous utilisez NEXTJS pour construire un site statique, j'aimerais que la méthode getInitialProps _ Seule uniquement pendant l'étape de construction et non sur le client.

Dans l'étape de construction, NEXTJS exécute la méthode Méthode GetinitialProps Avant que chaque composant, HTML rendu est utilisé pour générer la page HTML statique de la page. Sur le client, NEXTJS exécute également cette méthode avant que le composant de la page soit rendu afin de renvoyer les accessoires nécessaires à la composante. Ainsi, de grandes demandes peuvent retarder la première peinture du client car il s'agit d'une demande de blocage.

// example usage of API call in getInitialProps
import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

Je ne veux pas bouger ma demande d'API lente à componentDidMount Afin d'éviter la demande de blocage, car je souhaite utiliser les données renvoyées lors de l'étape de construction pour remplir le HTML statique, et cette demande particulière n'a pas besoin être dynamique ou mis à jour après la construction.

Y a-t-il une façon de faire getInitialProps exécuter uniquement lorsque next export Construit et non lorsque le client charge la page?

Est-ce une bonne pratique?

javascriptnode.jsnext.jsstatic-site
8
brettinternet

Allez avec la réponse de @dkms, qui est la meilleure solution pour les constructions statiques du site.

Ancienne réponse

Là sont de deux manières est une solution que j'ai trouvée pour empêcher le code dans getInitialProps de l'exécution d'une charge de composant de page.

1. Utilisez une balise d'ancrage régulière sans next/link à cette page.

getInitialProps fonctionne uniquement lorsque la page est liée à partir d'un next/link composant. Si une ancre JSX régulière <a href="/my-page">click me</a> est utilisé à la place, le composant getInitialProps sera non être invoqué. Les charges de pages directes sur les pages de site statique NEXTJS ne seront pas invoquées getInitialProps.

Notez que l'utilisation d'une ancrage standard au lieu de la next/link Composant provoquera une actualisation complète de la page.

Parce que c'est une solution médiocre, j'ai soumis une demande de fonctionnalité .

2. Utilisez req dans l'argument context _ Argument de manière conditionnelle de l'appel de l'API dans getInitialProps.

Je crois ce que @évenifotia voulait transmettre, c'est que req est indéfini dans un site exporté.

// example usage of API call in getInitialProps
import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async (ctx) => {
  const { req } = ctx // context object: { req, res, pathname, query, asPath }
  if (req) { // will only run during the build (next export)
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }

  return {}
}

export default Page

Pour plus d'informations sur getInitialProps, voir la Documentation . Un exemple en confirme que req devrait uniquement être défini sur le serveur (ou pendant la construction d'exportation):

const userAgent = req ? req.headers['user-agent'] : navigator.userAgent`

Cette deuxième option peut fonctionner pour certains scénarios, mais pas le mien où le retour d'un résultat vide de getInitialProps affectera le composant this.props.

Remarque:

L'acheminement peu profond n'est pas la réponse. selon la documentation (voir sous "Notes"):

Le routage peu profond ne fonctionne que pour les mêmes modifications de l'URL de la page.

1
brettinternet