Tavallisen valikon ongelma NextJS:ssä

Edellisessä oppitunnissa teimme valikon tavallisista linkeistä:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    <a href="/">home</a>
    <a href="/about">about</a>
    <a href="/price">price</a>
    <a href="/contacts">contacts</a>
  </>;
}

Keskustellaan nyt joistakin tähän liittyvistä ongelmista. Asia on niin, että näiden valikkolinkkien klikkaaminen aiheuttaa koko sivun uudelleenlatautumisen. Tämä on oikein SEO:n kannalta, mutta ei kovin optimaalista suorituskyvyn kannalta. Asia on niin, että kun sivu latautuu uudelleen, latamme uudelleen koko sivuston asettelun, vaikka vain sisältö muuttuu. Olisi optimaalisempaa ladata vain sivun sisältö.

NextJS:ssä on valmiiksi ratkaisu tähän ongelmaan. Tarkastelemme sitä seuraavassa oppitunnissa.