Next.js - Enrutamiento superficial
En Next.js, el enrutamiento superficial se refiere a navegar a la misma página pero sin llamadas a los métodos getServerSideProps, getStaticProps y getInitialProps.
Para hacer un enrutamiento superficial, usamos el enrutador con el indicador superficial como verdadero. Vea el siguiente ejemplo.
Actualice el archivo index.js en el directorio de páginas de la siguiente manera.
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 HomePage
Inicie el servidor Next.js
Ejecute el siguiente comando para iniciar el servidor:
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 successfully
Verificar salida
Abra localhost: 3000 en un navegador y luego haga clic en el enlace Recargar y verá el siguiente resultado.