Типичные различия между маршрутизаторами и ссылками в NextJS

Question

Я новичок в NextJS. Я хотел бы знать типичные варианты и варианты использования между next/router и next/link.

Какой из них я должен использовать в различных сценариях? Что делает что? Например, если я хочу загрузить общие компоненты или перемещаться между страницами, которые отображаются на стороне сервера. Также в чем разница, если я вызываю страницу с обычным тегом "а" или использую ссылку / маршрутизатор для достижения того же.

         import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.pathname === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

         import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

Answer 1

what is the difference if I call a page with a normal 'a' tag or use a link/router to achieve the same?

Основное отличие нормального <a> тег и next/link или же next/routerсостоит в том, что последние два используются для переходов на стороне клиента. Так что нормальный <a> Тег загрузит / перейдет на страницу с HTTP-запросом, в то время как маршрутизатор и ссылка загрузят страницу на стороне клиента.

Вы можете использовать next/router (внутри функции в вашем компоненте), когда next/link недостаточно, например, если вам нужно выполнить некоторые операции перед рендерингом нового компонента.

Таким образом, и маршрутизатор, и ссылка ведут себя одинаково, вы можете выбрать, в зависимости от того, что нужно делать вашему приложению, какой из них использовать.

Оба будут запускать методы выборки данных (getServerSideProps, getStaticProps, и getInitialProps)

Answer 2

Ссылка - это просто абстракция для маршрутизатора, гораздо проще использовать Linkкомпонент, чем создавать ссылку каждый раз вручную.