Ներածություն NextJS-ի նավարկություն

Դասագրքի այս բաժնում մենք կխոսենք հղումների աշխատանքի մասին NextJS-ում։

Սկսելու համար եկեք քննարկենք, թե ինչով են հղումներն առանձնահատուկ։ Եկեք նայենք դրանցին կայք ստեղծելու տարբեր մոտեցումներում։

React-ով կայք

Ենթադրենք՝ դուք ունեք կայք React-ով։ Ինչպես հայտնի է, React-ը ներկայացնում է SPA - կայք, որտեղ օգտատերը միշտ մնում է մեկ էջում։ Դուք կարող եք միացնել React Router և օգտատերը կմտածի, որ թերթում է տարբեր էջեր, միաժամանակ ֆիզիկապես մնալով մեկ ֆայլում։

Այս դեպքում օգտատերը կկտտացնի հղումներին, նրան կթվա, թե նա հայտնվում է մեկ այլ էջում, բայց կայքի էջը բրաուզերում չի վերաբեռնվի - React-ը դինամիկ կերպով կձևավորի այն, ինչ օգտատերը տեսնում է էկրանին։

Նման սխեմայում օգտատերը ստանում է կայքի մակետը էջ առաջին մուտք գործելիս, այնուհետև կայքի մասերն ուղղակի փոխվում են JavaScript-ի միջոցով։ Այս դեպքում կայքը կարող է տվյալներ հարցնել սերվերից AJAX-ի միջոցով։

Նման մոտեցումը նվազեցնում է բեռը հոստինգի վրա (որի ռեսուրսները արժեն մեր գումարը), ինչպես նաև բեռը օգտատիրոջ ինտերնետ-ալիքի վրա։

Բայց նման մոտեցումն ունի մինուս - SEO-ի հետ կապված խնդիր։ Կարծես կայքն ունի հղումների հավաքածու, և հասցեային տողում ինչ-որ բան է փոխվում, և նույնիսկ կարելի է ուղարկել հղում կայքի որոշակի էջին մեսենջերի միջոցով։ Սակայն, էջի պարունակությունը ձևավորվում է դինամիկ կերպով կլիենտի կողմից և որոնման համակարգերը չեն կարող դա մշակել։ Ուստի նման կայքը չի առաջադրվի։

Սակայն, ոչ բոլոր կայքերն են նախատեսված որոնման համակարգերում առաջադրվելու համար։ Եվ եթե ձերը նախատեսված չէ, ապա այս սխեման միանգամայն աշխատունակ է ձեզ համար։

Բեք-էնդով կայք

Ենթադրենք՝ ձեր կայքը պատրաստված է բեք-էնդի լեզուներից մեկով։ Օրինակ՝ PHP-ով։

Այս դեպքում, երբ օգտատերը կկտտացնի հղումներին, կայքի էջը ամեն անգամ կբեռնվի ամբողջությամբ։

Խնդիրն այն է, որ էջի էական մասը արդեն կա օգտատիրոջ մոտ։ Քանի որ, ինչպես արդեն գիտեք, էջում սովորաբար փոխվում է միայն կոնտենտը և մետատվյալները, իսկ մնացած ամեն ինչ մնում է անփոփոխ։

Ինչու՞ պետք է ներբեռնենք մնացածը, եթե փոխվել է միայն կոնտենտը։ Սա ստեղծում է բարձրացված բեռնվածություն սերվերի և ինտերնետ-ալիքի վրա։

Կա նաև մեկ այլ խնդիր։ Ենթադրենք էջում, որը մենք ստանում ենք, կոնտենտում տեղադրված է ապրանքների ցանկ, ինչպես առցանց խանութում։ Ակնհայտ է, որ յուրաքանչյուր ապրանք ունի նույնական վերստում։ Ավելի օպտիմալ կլիներ ներբեռնել միայն ապրանքների տվյալները և ապրանքի արտածման կաղապարը։ Եվ այնուհետև կլիենտի կողմից արտածել յուրաքանչյուր ապրանք այդ կաղապարում։ Բայց մենք ներբեռնում ենք ապրանքները կրկնվող ապրանքի վերստի հետ միասին։

Ամփոփելով, եթե մենք ունենք մաքուր բեք-էնդով կայք, մենք ցանցի միջով փոխանցում ենք շատ ավելորդ տվյալներ։

Սակայն, այս դեպքում մենք չունենք SEO-ի հետ կապված խնդիր։ Հարցված URL-ին միշտ տրամադրվում է ստատիկ պարունակություն, որը հասկանալի է որոնման համակարգերին։

NextJS-ով կայք

NextJS-ը համատեղում է երկու մոտեցումները։ Երբ օգտատերը URL-ը մուտքագրում է անմիջապես հասցեային տողում, ապա նրան պատասխանով հասնում է էջի ստատիկ պարունակությունը։

Երբ օգտատերը սկսում է կտտացնել մեր կայքի հղումներին, ապա էջը ամբողջությամբ չի թարմացվում, այլ AJAX-ի միջոցով բեռնվում են օգտատիրոջը անհրաժեշտ տվյալները։

Երբ որոնման համակարգը թերթում է մեր կայքը, այն տեսնում է իրեն անհրաժեշտ ստատիկ պարունակությունը։ Իսկ երբ օգտատերը թերթում է մեր կայքը, մեր կայքը սկսում է իրեն դրսևորել ինչպես SPA։

Եվ, ամենագլխավորը, NextJS-ն անում է այս ամենը ավտոմատ կերպով։ Մեզ պետք չէ հոգալ այդ մասին - այն ամենը կանի ինքնուրույն։ Գեղեցիկ։

Հաջորդ դասերում մենք կպարզենք, թե ինչպես ստիպել NextJS-ին աշխատել նկարագրված կերպով։