Next.js - Routage peu profond
Dans Next.js, le routage superficiel fait référence à la navigation vers la même page, mais aucun appel aux méthodes getServerSideProps, getStaticProps et getInitialProps.
Pour effectuer un routage peu profond, nous utilisons Router avec le drapeau shallow comme vrai. Voir l'exemple ci-dessous.
Mettez à jour le fichier index.js dans le répertoire pages comme suit.
import Router from 'next/router'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePageDémarrez le serveur Next.js
Exécutez la commande suivante pour démarrer le serveur -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfullyVérifier la sortie
Ouvrez localhost: 3000 dans un navigateur, puis cliquez sur le lien Recharger et vous verrez la sortie suivante.
