Utangulizi wa Navigesheni katika NextJS

Katika kifungu hiki cha mafunzo tutazungumza kuhusu kufanya kazi kwa viungo katika NextJS.

Kuanza, hebu tujadili, kuna nini maalum katika viungo. Tuyaangalie katika mbinu mbalimbali za kuunda tovuti.

Tovuti kwenye React

Wacha uwe na tovuti kwenye React. Kama inavyojulikana, React ni SPA - tovuti ambayo mtumiaji daima hubaki kwenye ukurasa mmoja. Unaweza kuunganisha React Router na mtumiaji atadhani kuwa anatembea kwenye kurasa tofauti, huku kimwili akibaki kwenye faili moja.

Wakati huo mtumiaji atabonyeza viungo, itaonekana kwake anaingia kwenye ukurasa mwingine, lakini ukurasa wa tovuti kwenye kivinjari haupaki upya - React itaunda kwa nguvu ile ambayo mtumiaji anaona kwenye skrini.

Katika mpango huo mtumiaji hupata muundo wa tovuti wakati wa kuingia kwanza kwenye ukurasa, kisha sehemu za tovuti hubadilika tu kupitia JavaScript. Wakati huo tovuti inaweza kuomba data kutoka kwa seva kupitia AJAX.

Mbinu hiyo inapunguza mzigo kwenye hosting (ambao rasilimali zake zina gharama yetu ya pesa), na pia mzigo kwenye kituo cha mtandao cha mtumiaji.

Lakini mbinu hiyo ina hasara - shida na SEO. Kana kwamba tovuti ina seti ya viungo, na kwenye bar ya anwani kuna kitu kinabadilika, na unaweza hata kutuma kiungo kwa ukurasa maalum wa tovuti kupitia mfumo wa ujumbe. Hata hivyo, yaliyomo ya ukurasa huundwa kwa nguvu kwenye mteja na vinjari vya utafutaji hawiwezi kuitayarisha hivyo. Kwa hivyo tovuti kama hiyo haitakuzwa.

Si tovuti zote, hata hivyo, zimeundwa kwa kukuzwa kwenye vinjari vya utafutaji. Na ikiwa yako haikukusudiwa, basi mpango huo unafaa kwa wewe.

Tovuti kwenye backend

Wacha tovuti yako ifanywe kwa moja ya lugha za backend. Kwa mfano, kwa PHP.

Katika kesi hiyo, wakati mtumiaji atakapobonyeza viungo, ukurasa wa tovuta utapakiwa kabisa kila wakati.

Shida ni kwamba sehemu kubwa ya ukurasa tayari iko kwa mtumiaji. Maana, kama umeshajua, kwenye ukurasa kwa kawaida hubadilika yaliyomo tu na metadata, na kila kitu kingine hubaki bila kubadilika.

Kwa nini tusipakie upya kila kitu, ikiwa kimebadilika ni yaliyomo tu? Hii inajenga mzigo ulioongezeka kwenye seva na kituo cha mtandao.

Kuna shida nyingine pia. Wacha kwenye ukurasa, ambao tunapata, kwenye yaliyomo kuna orodha ya bidhaa, kama kwenye duka la mtandaoni. Ni wazi, kwamba kila bidhaa ina muundo wa wavuti sawa. Bora zaidi ingekuwa kupakua data tu za bidhaa, na kiolezo cha kuonyesha bidhaa. Na kisha kwenye mteja kuonyesha kila bidhaa kwenye kiolezo hicho. Lakini tunapakua bidhaa pamoja na muundo wa wavuti unaorudiwa wa bidhaa.

Kwa kufupisha, ikiwa tuna tovuti kwenye backend safi, tunapeleka data nyingi za ziada kwenye mtandao.

Hata hivyo, katika kesi hii hatuna shida na SEO. Kwa URL iliyoombwa daima hutolewa yaliyomo ya tuli, yanayoeleweka kwa vinjari vya utafutaji.

Tovuti kwenye NextJS

NextJS inachanganya mbinu zote mbili. Wakati mtumiaji anaandika URL moja kwa moja kwenye bar ya anwani, basi anapokea yaliyomo ya tuli ya ukurasa.

Lakini wakati mtumiaji anapoanza kubonyeza viungo kwenye tovuti yetu, basi ukurasa wa tovuti haupaki upya kabisa, bali kupitia AJAX inapakua data inayohitajika na mtumiaji.

Wakati kinjari cha utafutaji kinapotembea kwenye tovuti yetu, kinaona yaliyomo ya tuli yanayohitajika. Na wakati mtumiaji anapotembea kwenye tovuti yetu, tovuti yetu inaanza kuishi kama SPA.

Na, muhimu zaidi, NextJS inafanya yote haya kiotomatiki! Hatuitaji kujali kuhusu hili - itafanya yote peke yake. Urembo!

Katika masomo yafuatayo tutachambua, jinsi ya kufanya NextJS ifanye kazi kwa njia iliyoelezewa.