Навигатсия дар NextJS-ро муаррифӣ кардан

Дар ин қисми китобхона мо дар бораи коркарди пайвандҳо дар NextJS гап мезанем.

Барои оғоз биёед дар бораи он, ки пайвандҳо чи хусусияти махсус доранд, муҳокима кунем. Мо ба онҳо дар равишҳои гуногуни сохтани сомона мебинем.

Сомона бо React

Фарз кунем, ки шмо сомонае бо React доред. Чизе, ки маълум аст, React як SPA мебошад - як сомонае, ки дар он корбар ҳамеша дар як саҳифа бозӣ мекунад. Шумо метавонед React Router-ро васл кунед ва корбар фикр мекунад, ки ба саҳифаҳои гуногун меравад, дар ҳоле ки ҷисман дар як файл бозӣ мекунад.

Дар ин ҳолат корбар рӯйи пайвандҳо клик мекунад, ӯ ба ӯ дарк мекунад, ки ба саҳифаи дигар меравад, аммо саҳифаи сомона дар браузер такрор намешавад - React динамикӣ он чиро ки корбар дар экран мебинад, ташкил хоҳад кард.

Дар чунин схеме корбар намуди сомонаро дар вақти аввалин даромад ба саҳифа мегирад, ва баъд қисматҳои сомона танҳо тавассути JavaScript тағйир меёбанд. Дар ин вақт сомона метавонад додаҳоро аз сервер тавассути AJAX дархост кунад.

Ин равиш борро ба хостинг кам мекунад (ресурсҳое, ки пули моанд), ва инчунин борро ба канали интернети корбар.

Аммо ин равиш нуқси - мушкилии SEO дорад. Гуё ки сомона маҷмӯи пайвандҳоро дорад, ва дар сатри нишонӣ чизе тағйир меёбад, ва шумо метавонед ҳатто пайванди саҳифаи муайяни сомонаро тавассути месседжер бифиристед. Аммо, мундариҷаи саҳифа динамикӣ дар клиент ташкил мешавад ва ҷустуҷӯгарҳо наметавонанд чунин чизро кор кунанд. Пас чунин сомона пешрафт намекунад.

На ҳама сомонаҳо, аммо, барои пешрафт дар ҷустуҷӯгарҳо пешбинӣ шудаанд. Ва агар шумо ин тавр нестед, пас ин схема барои шумо комилан корӣ аст.

Сомона дар бекенд

Фарз кунем, ки сомонаи шумо бо яке аз забонҳои бекенд сохта шудааст. Масалан, бо PHP.

Дар ин ҳолат, вақте ки корбар рӯйи пайвандҳо клик мекунад, саҳифаи сомона ҳар дафъа комилан бор мешавад.

Мушкилӣ дар он аст, ки қисми муҳими саҳифа аллакай дар назди корбар мавҷуд аст. Зеро, ки шумо аллакай медонед, дар саҳифа одатан танҳо мундариҷа ва мета додаҳо тағйир меёбанд, ва ҳама чизҳои дигар бозӣ мешаванд.

Чаро мо бояд дигар чизҳоро бор кунем, агар тағйир карда шуд танҳо мундариҷа? Ин бори баландро дар сервер ва канали интернет эҷод мекунад.

Мушкилии дигар ҳам вуҷуд дорад. Фарз кунем дар саҳифае, ки мо мегирем, дар мундариҷа рӯйхати маҳсулот ҷойгир аст, ҳамчунон ки дар мағозаи онлайн. Ошкор аст, ки ҳар як маҳсулот верстаии якхела дорад. Беҳтар мебуд, агар танҳо додаҳои маҳсулотро, ва намунаи баромади маҳсулотро бор кардем. Ва баъд дар клиент ҳар як маҳсулотро дар ин намуна баён кунем. Аммо мо маҳсулотҳоро бо верстаии такроршавандаи маҳсулот бор мекунем.

Хулоса, агар мо сомонае дар бекенди холӣ дорем, мо дар шабака бисёр додаҳои иловагӣ мефиристанем.

Аммо, дар ин ҳолат мо мушкилие бо SEO надорем. Барои URL дархостшуда ҳамеша мундариҷаи статикӣ баргардонида мешавад, ки барои ҷустуҷӯгарҳо фаҳмо аст.

Сомона дар NextJS

NextJS ҳарду равишро муттаҳид мекунад. Вақте ки корбар URL-ро рост дар сатри нишонӣ ворид мекунад, пас ба ӯ дар ҷавоб мундариҷаи статикии саҳифа мерасад.

Вақте ки корбар оғоз ба клик кардан рӯйи пайвандҳои сомонаи мо мекунад, пас саҳифаи сомона комилан нав намешавад, балки тавассути AJAX додаҳои зарурии корбар бор карда мешаванд.

Вақте ки ҷустуҷӯгар рӯйи сомонаи мо меравад, ӯ мундариҷаи статикии заруриашро мебинад. Ва вақте ки корбар рӯйи сомонаи мо меравад, сомонаи мо ба монанди SPA рафтор мекунад.

Ва, ҳама муҳимтар, NextJS ҳамаи инро ба таври худкор анҷом медиҳад! Ба мо ниёз нест ки дар бораи ин хавотир шавем - ӯ ҳамаашро худаш анҷом медиҳад. Зебоӣ!

Дар дарсҳои оянда мо фаҳмида мешавем, ки чӣ гуна NextJS-ро ба тавре ки тавсиф шуд, кор кардан водор кунем.