Next.js - Perutean Dangkal
Di Next.js, perutean dangkal mengacu pada menavigasi ke halaman yang sama tetapi tidak ada panggilan ke metode getServerSideProps, getStaticProps, dan getInitialProps.
Untuk melakukan routing yang dangkal, kami menggunakan Router dengan flag shallow sebagai true. Lihat contoh di bawah ini.
Perbarui file index.js di direktori halaman sebagai berikut.
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 HomePageMulai Server Next.js
Jalankan perintah berikut untuk memulai server -.
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 successfullyVerifikasi Output
Buka localhost: 3000 di browser lalu klik Reload link dan Anda akan melihat output berikut.
