Inleiding tot navigasie in NextJS
In hierdie afdeling van die handleiding sal ons praat oor hoe skakels in NextJS werk.
Laat ons eers bespreek wat so spesiaal is aan skakels. Kom ons kyk na hulle in verskillende benaderings om 'n webwerf te skep.
'n Webwerf op React
Gestel jy het 'n webwerf op React. Soos bekend is, is React 'n SPA - 'n webwerf waar die gebruiker altyd bly op een bladsy. Jy kan die React Router koppel en die gebruiker sal dink dat hy beweeg oor verskillende bladsye, terwyl hy fisies bly op een lêer.
Intussen sal die gebruiker klik op skakels, dit sal vir hom lyk asof hy beland op 'n ander bladsy, maar die bladsy van die webwerf in die blaaier sal nie herlaai nie - React sal dinamies vorm wat die gebruiker op die skerm sien.
In so 'n skema kry die gebruiker die webwerf-uitleg met die eerste besoek aan die bladsy, en dan verander dele van die webwerf net deur middel van JavaScript. Intussen kan die webwerf data van die bediener aanvra via AJAX.
Hierdie benadering verminder die las op die gasheer (hulpbronne wat ons geld kos), sowel as die las op die gebruiker se internetkanaal.
Maar hierdie benadering het 'n nadeel - die probleem met SEO. Dit lyk asof die webwerf 'n stel skakels het, en in die adres ry verander iets, en jy kan selfs 'n skakel na 'n spesifieke bladsy van die webwerf stuur via 'boodskapper'. Die inhoud van die bladsy word eger dinamies op die kliënt gevorm en soekenjins is nie in staat om dit te verwerk nie. Daarom sal so 'n webwerf nie bevorder word nie.
Nie alle webwerwe is eger bedoel vir befordering in soekenjins nie. En as joune nie bedoel is nie, dan is hierdie skema heel werkbaar vir jou.
'n Webwerf op die agterkant
Gestel jou webwerf is gemaak op een van die agterkant-tale. Byvoorbeeld, op PHP.
In hierdie geval, wanneer die gebruiker op skakels klik, sal die bladsy van die webwerf elke keer heeltemal gelaai word.
Die probleem is dat 'n wesenlike deel van die bladsy reeds by die gebruiker is. Soos jy reeds weet, verander net die inhoud op die bladsy gewoonlik en metadata, en al die ander bly onveranderd.
Hoekom moet ons die res aflaai as net die inhoud verander het? Dit skep 'n verhoogde las op die bediener en die internetkanaal.
Daar is nog 'n probleem. Gestel op die bladsy, wat ons ontvang, is daar 'n lys produkte in die inhoud, soos in 'n aanlynwinkel. Dit is duidelik dat elke produk dieselfde opmaak het. Dit sou meer optimaal wees om net die data van die produkte, en die sjabloon vir die vertoning van die produk af te laai. En dan op die kliënt elke produk in hierdie sjabloon te vertoon. Maar ons laai die produkte saam met die herhalende opmaak van die produk af.
Om op te som, as ons 'n webwerf op suiwer agterkant het, stuur ons baie oortollige data oor die netwerk.
In hierdie geval het ons eger nie die probleem met SEO nie. Vir die aangevraagde URL word altyd statiese inhoud terugbesorg, wat vir soekenjins verstaanbaar is.
'n Webwerf op NextJS
NextJS kombineer beide benaderings. Wanneer die gebruiker 'n URL direk in die adres ry intik, word statiese inhoud van die bladsy aan hom terugbesorg.
Maar wanneer die gebruiker begin om te klik op skakels op ons webwerf, word die bladsy van die webwerf nie heeltemal verfris nie, maar via AJAX word die nodige data vir die gebruiker gelaai.
Wanneer die soekenjin op ons webwerf rondbeweeg, sien hy die statiese inhoud wat hy nodig het. En wanneer die gebruiker op ons webwerf rondbeweeg, begin ons webwerf homself soos 'n SPA te gedra.
En, die belangrikste, NextJS doen dit alles outomaties! Ons hoef nie ons daaroor te bekommer nie - hy sal alles self doen. Pragtig!
In die volgende lesse sal ons ondersoek hoe om NextJS te laat werk soos beskryf.
