Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.
Рендеровање је процес претварања Реацт кода у ХТМЛ. Начин приказивања који одаберете зависи од података са којима радите и колико вам је стало до перформанси.
У Нект.јс-у, рендеровање је веома разноврсно. Странице можете приказати на страни клијента или на страни сервера, статички или постепено.
Погледајте како ове методе функционишу и како свака ради.
Рендеровање на страни сервера
Код приказивања на страни сервера (ССР), када корисник посети веб страницу, претраживач шаље захтев серверу за ту страницу. Сервер преузима потребне податке из базе података, ако је потребно, и шаље их заједно са садржајем странице у претраживач. Прегледач га затим приказује кориснику.
Претраживач поставља овај захтев за сваку везу на коју корисник кликне, што значи да сервер сваки пут обрађује захтев.
Ово може смањити перформансе веб локације. Међутим, приказивање на страни сервера је савршено за странице које троше динамичке податке.
Користите гетСерверСидеПропс да поново направите страницу сваки пут када корисник то затражи.
извозУобичајенофункцијаКућа({ подаци }) {
повратак (
<главни>
// Користитеподатака
</main>
);
}извозасинцфункцијагетСерверСидеПропс() {
// Дохвати податке из спољног АПИ-ја
конст рес = чекати дохвати('хттпс://.../data')
конст подаци = чекати рес.јсон()
// Биће прослеђен компоненти странице као пропс
повратак { реквизити: { подаци } }
}
гетСерверСидеПропс ради само на серверу и овако ради:
- Када корисник директно приступи страници, она се покреће у време захтева и страница се унапред приказује са реквизитима које враћа.
- Када корисник приступи страници преко следећег линка, претраживач шаље захтев серверу који је покреће.
У новој верзији, можете да се одлучите за приказивање на страни сервера помоћу динамичког преузимања података на страници или изгледу.
Динамичка преузимања података су захтеви фетцх() који посебно искључују кеширање постављањем опције кеширања на „но-сторе“.
донеси ('https://...', { кеш: 'без продавнице' });
Алтернативно, подесите ревалидате на 0:
донеси ('https://...', { нект: { ревалидате: 0 } });
Ова функција је тренутно у бета верзији, па имајте то на уму. Више о динамичким преузимањима података можете прочитати у Нект.јс 13 бета докумената.
Рендеринг на страни клијента
Требало би да користите приказивање на страни клијента (ЦСР) када морате често да ажурирате податке или када не желите да унапред прикажете своју страницу. ЦСР можете имплементирати на нивоу странице или на нивоу компоненте. На нивоу странице, Нект.јс преузима податке у време извођења, а када се то ради на нивоу компоненте, преузима податке при монтирању. Због тога ЦСР може допринети спорим перформансама.
Користити усеЕффецт() кука да прикажете странице на клијенту овако:
увоз { усеСтате, усеЕффецт } из 'реаговати'
функцијаКућа() {
конст [подаци, сетДата] = усеСтате(нула)
конст [исЛоадинг, сетЛоадинг] = усеСтате(лажно)усеЕффецт(() => {
сетЛоадинг(истина)донеси ('/api/get-data')
.онда((рес) => рес.јсон())
.онда((подаци) => {
сетДата (подаци)
сетЛоадинг(лажно)
})
}, [])иф (исЛоадинг) се враћа <стр>Учитавање...</п>
ако се (!подаци) врате <стр>Нема података</п>
повратак (
<див>
// Користитеподатака
</div>
)
}
Такође можете користити СВР куку. Он кешира податке и поново их потврђује у случају да застаре.
увоз усеСВР из 'свр'
цонст преузимач = (...аргс) => дохвати(...аргс).затим((рес) => рес.јсон())
функцијаКућа() {
конст { подаци, грешка } = усеСВР('/api/подаци', преузимање)
ако се (грешка) врати <див>Није успео да учита</div>
ако се (!подаци) врате <див>Учитавање...</div>
повратак (
<див>
// Користитеподатака
</div>
)
}
У Нект.јс 13, потребно је да користите компоненту клијента додавањем директиве „усе цлиент“ на врх датотеке.
"користитиклијент";
извозУобичајено () => {
повратак (
<див>
// Клијентска компонента
</div>
);
};
Разлика између ССР-а и ЦСР-а је у томе што се подаци преузимају на сваком захтеву за страницу на серверу у ССР-у, док се подаци преузимају на страни клијента у ЦСР-у.
Генерисање статичког сајта
Са генерисањем статичке локације (ССГ), страница преузима податке једном током времена изградње. Статично генерисане странице су веома брзе и добро раде јер су све странице унапред направљене. ССГ је стога савршен за странице које користе статички садржај попут продајних страница или блогова.
У Нект.јс морате да извезете функцију гетСтатицПропс на страницу коју желите статички да прикажете.
извозУобичајенофункцијаКућа({ подаци }) {
повратак (
<главни>
// Користитеподатака
</main>
);
}извозасинцфункцијагетСтатицПропс() {
// Преузимање података из спољног АПИ-ја у време израде
конст рес = чекати дохвати('хттпс://.../data')
конст подаци = чекати рес.јсон()
// Биће прослеђен компоненти странице као пропс
повратак { реквизити: { подаци } }
}
Такође можете поставити упит бази података унутар гетСтатицПропс.
извозасинцфункцијагетСтатицПропс() {
// Цаллфункцијадодонетиподатакаизбаза података
конст подаци = чекати гетДатаФромДБ()
повратак { реквизити: { подаци } }
}
У Нект.јс 13, статичко приказивање је подразумевано, а садржај се преузима и кешује осим ако не искључите опцију кеширања.
асинцфункцијагетДата() {
конст рес = чекати дохвати('хттпс://.../data');
повратак рес.јсон();
}
извозУобичајеноасинцфункцијаКућа() {
конст подаци = чекати гетДата();
повратак (
<главни>
// Користитеподатака
</main>
);
}
Сазнајте више о статичко приказивање у Нект.јс 13 из докумената.
Инкрементално-статичко генерисање
Понекад желите да користите ССГ, али такође желите да редовно ажурирате садржај. Ту помаже инкрементална статичка генерација (ИСГ).
ИСГ вам омогућава да креирате или ажурирате статичке странице након што их направите након временског интервала који одредите. На овај начин, не морате поново да правите цео сајт само странице којима је то потребно.
ИСГ задржава предности ССГ-а уз додатну погодност пружања ажурираног садржаја корисницима. ИСГ је савршен за оне странице на вашем сајту које троше променљиве податке. На пример, можете користите ИСР за приказивање постова на блогу тако да блог остане ажуриран када уређујете постове или додајете нове.
Да бисте користили ИСР, додајте ревалидате проп у функцију гетСтатицПропс на страници.
извозасинцфункцијагетСтатицПропс() {
конст рес = чекати дохвати('хттпс://.../data')
конст подаци = чекати рес.јсон()
повратак {
реквизити: {
подаци,
},
поново потврдити: 60
}
}
Овде ће Нект.јс покушати да поново направи страницу када захтев стигне после 60 секунди. Следећи захтев ће резултирати одговором са ажурираном страницом.
У Нект.јс 13 користите ревалидате у преузимању овако:
донеси ('https://.../data', { нект: { ревалидате: 60 } });
Можете да подесите временски интервал на оно што најбоље функционише са вашим подацима.
Како одабрати метод рендеровања
До сада сте научили о четири методе приказивања у Нект.јс — ЦСР, ССР, ССГ и ИСГ. Свака од ових метода је прикладна за различите ситуације. ЦСР је користан за странице којима су потребни нови подаци, где јак СЕО није проблем. ССР је такође одличан за странице које троше динамичке податке, али је више прилагођен СЕО-у.
ССГ је погодан за странице чији су подаци углавном статични, док је ИСГ најбољи за странице које садрже податке које желите да ажурирате у интервалима. ССГ и ИСГ су одлични у погледу перформанси и СЕО-а јер се подаци унапред преузимају и можете их кеширати.
