ნავიგაცია NextJS-ში - შესავალი

ამ სახელმძღვანელოს ამ განყოფილებაში ჩვენ ვისაუბრებთ ლინკების მუშაობაზე NextJS-ში.

დასაწყისისთვის, მოდით განვიხილოთ, რა არის განსაკუთრებული ლინკებში. შევხედოთ მათ საიტის შექმნის სხვადასხვა მიდგომებში.

საიტი React-ზე

დავუშვათ, თქვენ გაქვთ საიტი React-ზე. როგორც ცნობილია, React წარმოადგენს SPA-ს - საიტს, რომელშიც მომხმარებელი ყოველთვის რჩება ერთ გვერდზე. თქვენ შეგიძლიათ დააკავშიროთ React Router და მომხმარებელი იფიქრებს, რომ დადის სხვადასხვა გვერდებზე, ფიზიკურად დარჩენილიც კი ერთ ფაილზე.

ამ შემთხვევაში მომხმარებელი დააწკაპუნებს ლინკებს, მას ეჩვენება, რომ ის მოხვდება სხვა გვერდზე, მაგრამ საიტის გვერდი ბრაუზერში არ განახლდება - React დინამიურად შექმნის იმას, რასაც მომხმარებელი ხედავს ეკრანზე.

ასეთ სქემაში მომხმარებელი იღებს საიტის მაკეტს გვერდზე პირველად შესვლისას, შემდეგ კი საიტის ნაწილები უბრალოდ იცვლება JavaScript-ის მეშვეობით. ამ შემთხვევაში საიტს შეუძლია მოითხოვოს მონაცემები სერვერიდან AJAX-ის მეშვეობით.

ასეთი მიდგომა ამცირებს დატვირთვას ჰოსტინგზე (რომლის რესურსები ჩვენი ფულის ღირსაა), ასევე დატვირთვას მომხმარებლის ინტერნეტ არხზე.

მაგრამ ამ მიდგომას აქვს მინუსი - SEO პრობლემა. როგორც ჩანს, საიტს აქვს ლინკების ნაკრები, და მისამართის სტრიქონში რაღაც იცვლება, და შესაძლებელია მესენჯერის მეშვეობით საიტის კონკრეტული გვერდის ლინკის გაგზავნაც. თუმცა, გვერდის შიგთავსი ფორმირდება დინამიურად კლიენტზე და საძიებო სისტემები მისი დამუშავება ვერ ახერხებენ. ამიტომ ასეთი საიტი ვერ იქნება პოპულარიზებული.

თუმცა, ყველა საიტი არ არის განკუთვნილი პოპულარიზაციისთვის საძიებო სისტემებში. და თუ თქვენი საიტი არ არის განკუთვნილი, მაშინ ეს სქემა სრულიად მუშაობს თქვენთვის.

საიტი ბეკენდზე

დავუშვათ, თქვენი საიტი შექმნილია ბეკენდის ერთ-ერთ ენაზე. მაგალითად, PHP-ზე.

ამ შემთხვევაში, როდესაც მომხმარებელი დააწკაპუნებს ლინკებს, საიტის გვერდი ყოველ ჯერზე მთლიანად ჩაიტვირთება.

პრობლემა ისაა, რომ მომხმარებელს გვერდის მნიშვნელოვანი ნაწილი უკვე გააჩნია. რადგან, როგორც თქვენ უკვე იცით, გვერდზე, როგორც წესი, იცვლება მხოლოდ კონტენტი და მეტა მონაცემები, ხოლო დანარჩენი რჩება უცვლელი.

რატომ უნდა ჩავტვირთოდ დანარჩენი, თუ შეიცვალა მხოლოდ კონტენტი? ეს ქმნის გაზრდილ დატვირთვას სერვერზე და ინტერნეტ არხზე.

არსებობს კიდევ ერთი პრობლემა. დავუშვათ, გვერდზე, რომელსაც ვიღებთ, კონტენტში განთავსებულია პროდუქტების სია, როგორც ინტერნეტ მაღაზიაში. ცხადია, რომ თითოეულ პროდუქტს აქვს იგივე ვერსტკა. უფრო ოპტიმალური იქნებოდა ჩვენთვის პროდუქტების მხოლოდ მონაცემების ჩამოტვირთვა, და პროდუქტის გამოტანის შაბლონი. და შემდეგ კლიენტზე გამოვიტანოთ თითოეული პროდუქტი ამ შაბლონში. მაგრამ ჩვენ ვტვირთავთ პროდუქტებს პროდუქტის განმეორებად ვერსტკასთან ერთად.

რეზიუმირებით, თუ ჩვენ გვაქვს საიტი სუფთა ბექენდზე, ჩვენ ვაგზავნით ქსელში ბევრ ზედმეტ მონაცემს.

თუმცა, ამ შემთხვევაში ჩვენ არ გვაქვს პრობლემა SEO-სთან. მოთხოვნილ URL-ზე ყოველთვის ბრუნდება სტატიკური შიგთავსი, რომელიც გასაგებია საძიებო სისტემებისთვის.

საიტი NextJS-ზე

NextJS აერთიანებს ორივე მიდგომას. როდესაც მომხმარებელი აკრეფს URL-ს პირდაპირ მისამართის სტრიქონში, მას პასუხად ბრუნდება გვერდის სტატიკური შიგთავსი.

როდესაც კი მომხმარებელი იწყებს დაწკაპუნებას ლინკებზე ჩვენს საიტზე, გვერდი საიტის მთლიანად არ განახლდება, არამედ AJAX-ის მეშვეობით ჩაიტვირთება მომხმარებლისთვის საჭირო მონაცემები.

როდესაც საძიებო სისტემა დადის ჩვენს საიტზე, ის ხედავს მისთვის საჭირო სტატიკურ შიგთავსს. როდესაც კი მომხმარებელი დადის ჩვენს საიტზე, ჩვენი საიტი იწყებს SPA-ს მსგავსად ქცევას.

და, რაც მთავარია, NextJS აკეთებს ამ ყველაფერს ავტომატურად! ჩვენ არ გვჭირდება ამაზე ზრუნვა - ის თავად ყველაფერს გააკეთებს. მშვენიერება!

შემდეგ გაკვეთილებზე ჩვენ გავარკვევთ, როგორ აიძულებს NextJS იმუშაოს აღწერილი გზით.