NextJS-da navigasiýa giriş

Bu okuw kitabyň bölüminde biz NextJS-de baglanyşyklar bilen iş hakda gürrüň ederis.

Başlangyçda, baglanyşyklaryň nämeden ýörite bolşyny çekişdireli. Onlara web sahypasyny döretmek üçin dürli ýörelgelerde seredeli.

React-da web sahypasy

Size React-da web sahypasy bar bolsun. Maly bolşy ýaly, React SPA - ulanyjynyň hemişe bir sahypada galýan web sahypasyny görkezýär. Size React Router birikdirip bilersiňiz we ulanyjy dürli sahypalara gidýändigi hakda oýlar, şol bir wagtda fiziki taýdan bir faýlda galyp.

Şol wagt ulanyjy baglanyşyklara basar, ona beýleki sahypa geçýändigi ýaly bolup görner, ýöne brauzerdeki web sahypasynyň özi ýüklenmez - React ulanyjynyň ekranda görýänini dynamiki görnüşde döreder.

Şeýle shemada ulanyjy ilkinji gezek sahypa girýäninde web sahypasynyň maketini alyar, soňra web sahypasynyň bölekleri diňe JavaScript arkaly üýtgeýär. Şol bir wagtda web sahypasy serwerden maglumatlary AJAX arkaly sorap bilýär.

Şeýle ýanaşma hostinge ýükü azaldýar (gymmatly resurslarymyzyň bahasyna), şeýle hem ulanyjynyň internet kanalyna ýükü azaldýar.

Ýöne şeýle ýanaşmanyň kemçiligi bar - SEO bilen meselesi. Web sahypasynyň baglanyşyklar toplumy bar ýaly, we salgy setirinde bir zat üýtgeýär ýaly, we hatda belli bir web sahypasyna baglanyşyk messenger arkaly iberip bilersiňiz. Ýöne, sahypanyň mazmuny klientde dinamiki döredilýär we gözleg ulaglary ony işläp bilmeýär. Şonuň üçin şeýle web sahypasy ösdürilmez.

Emma, ähli web sahypalar gözleg ulaglarynda ösdürilmek üçin niýetlenen däl. Eger siziňki niýetlenen bolmasa, onda bu shema siziň üçin doly işleýär.

Backend-de web sahypasy

Web sahypasyňyz bir backend diliň birinde döredilen bolsun. Mysal üçin, PHP-de.

Bu ýagdaýda, ulanyjy baglanyşyklara basanda, web sahypasy her gezek tutuşlygyna ýüklener.

Mesele şonda, sahypanyň esasy bölegi artyk ulanyjyda bar. Sebäbi, siz eýýäm bilýäňiz, sahypada adatça diňe mazmun we metadata üýtgeýär, beýleki zatlar bolsa üýtgemeýär.

Mazmun diňe üýtgen bolsa, beýlekilerini näme üçin göçürmeli? Bu serwer we internet kanala ýokary ýük döredýär.

Ýene bir mesele bar. Sahypa üçin alýanymyzda, mazmunda internet dükanyndaky ýaly, önümleriň sanawy ýerleşen bolsun. Açyk-aýdan, her önüm birmeňzeş wersiýa eýe. Has optimal bolardy diňe önümleriň maglumatlaryny, we önüm çap etmek üçin şablon göçürmek. Soňra klientde her önümi şu şablonda çap etmek. Ýöne biz önümleri gaýtalanýan önüm wersiýasy bilen bilelikde göçürýäris.

Jemleýänimizde, eger biz saf backend-de web sahypasy bolsa, internetde köp artykmaç maglumat geçirýäris.

Emma, bu ýagdaýda bizde SEO bilen meselesi ýok. Soralan URL üçin hemişe statiki mazmun gaýtarylýar, gözleg ulaglaryna düşnükli.

NextJS-de web sahypasy

NextJS her iki ýörelgeni birleşdirýär. Ulanyjy URL-i derrew salgy setirine ýazanda, onda oňa sahypanyň statiki mazmuny jogap hökmünde gelýär.

Emma ulanyjy web sahypamyzdaky baglanyşyklara basanyna başlansa, onda web sahypasy tutuşlygyna täze ýüklenmeýär, eýsem AJAX arkaly ulanyjynyň zerur maglumatlary ýüklenilýär.

Gözleg ulagy web sahypamyzda gezek bolanda, özüne zerur bolan statiki mazmuny görýär. Ulanyjy web sahypamyzda gezek bolanda bolsa, web sahypamyz SPA ýaly özüni alyp barar.

We, iň başy, NextJS munyň hemmesini awtomatiki edýär! Biz munyň üçin alada etmeli däl - ol özi hemme işi eder. Gözellik!

Indiki sapaklarda biz, NextJS-i beýany edilen ýaly işletmek üçin nädip işlemeli, düşünjek.