Нект.јс је робустан оквир који омогућава програмерима да брзо граде Реацт апликације које се приказују на страни сервера. Има различите битне карактеристике. Једна од његових кључних карактеристика је његова способност да лако дохвати податке и учини их доступним компонентама.

Дохваћање података је суштинска карактеристика која омогућава програмерима да преузму и прикажу податке на веб локацији/веб апликацији. Постоји неколико различитих начина за преузимање података у Нект.јс, сваки са својим предностима и случајевима коришћења. Овај чланак ће истражити различите начине за преузимање података у Нект.јс.

Коришћење усеЕффецт куке за преузимање података

Тхе усеЕффецт кука је а Реацт кука која се користи за извођење нежељених ефеката, као што су АПИ позиви у компонентама. Можете користити усеЕффецт куку за преузимање података у Нект.јс.

Ова кука је корисна за странице којима су потребни динамички подаци, као што су странице профила корисника које приказују информације специфичне за корисника који је пријављен.

Да бисте користили усеЕффецт куку, прво је увезете у компоненту по избору, преузмете податке и рендерујете своју страницу користећи их.

На пример:

увоз { усеЕффецт, усеСтате } из'реаговати';
извозУобичајенофункцијаКућа() {
конст [подаци, сетДата] = усеСтате("");
 усеЕффецт(() => {
 донеси (' https://api.example.com/data');
 .онда( (одговор) => респонсе.јсон() )
 .онда( (података) => сетДата (подаци) )
 }, []); 
повратак (


 {дата.наме}
 </div>
 )
}

Овај блок кода користи усеЕффецт куку за преузимање података из АПИ-ја. Ако прослеђује два параметра усеЕффецт куку: функцију за преузимање података и низ зависности. На успех, користи сетДата() да ажурирате стање компоненте подацима које враћа захтев за преузимање.

Низ зависности који проследите куки усеЕффецт треба да садржи вредност од које зависи ефекат. Компонента ће поново покренути ефекат само када се вредност у низу зависности промени. Ако је низ зависности празан — као у овом примеру — ефекат ће се покренути само при првом рендеру.

Руковање аутоматском ревалидацијом помоћу СВР-а

Тхе СВР (стале-вхиле-ревалидате) библиотека је Реацт хоок библиотека за руковање дохваћањем података. Мораш поставити СВР библиотеку прво, да га користите у својој следећој апликацији.

Једна од кључних карактеристика СВР библиотеке је њена способност да аутоматизује поновну валидацију података. Ова функција је неопходна када се подаци често ажурирају и када вам је потребно да буду стално ажурирани. Ова функционалност осигурава да ваша апликација увек има приступ најновијим подацима, чинећи је динамичнијом и одговорнијом за ваше кориснике.

Библиотека СВР прави нови захтев за преузимање АПИ-ју када се корисник поново фокусира на страницу или прелази са једне картице на другу. Када корисник напусти страницу, подаци приказани на екрану постају застарели. Када се врате на страницу, библиотека СВР шаље нови захтев за преузимање АПИ-ју и упоређује нове податке са застарелим подацима да би утврдила да ли су се променили.

Да бисте спречили СВР библиотеку да изврши ову радњу, можете користити ревалидатеОнФоцус опција.

Овако:

конст { дата, еррор, исЛоадинг } = усеСВР(' https://api.example.com/data', преузимач, {
 ревалидатеОнФоцус: лажно,
})

Постављање својства ревалидатеОнФоцус на фалсе ће обезбедити да библиотека СВР неће поново потврдити ваше податке сваки пут када поново фокусирате страницу.

СВР библиотека такође потврђује податке кад год се корисник поново повеже на интернет. Ова акција може бити од велике помоћи у одређеним ситуацијама и ради аутоматски.

Да бисте онемогућили акцију, можете користити ревалидатеОнРецоннецт опција:

конст { дата, еррор, исЛоадинг } = усеСВР(' https://api.example.com/data', преузимач, {
 ревалидатеОнРецоннецт: лажно,
})

Да бисте онемогућили аутоматску поновну проверу ваљаности података, подесите својства ревалидатеОнФоцус и ревалидатеОнРеццонецт на фалсе.

Коришћење библиотеке изоморфно-недохвати за обављање захтева за преузимање

Тхе изоморфно-недохватити библиотека је мала, лагана библиотека која може да извршава захтеве за преузимање у апликацији Нект.јс. Библиотека је одлична алтернатива завичајној донети АПИ. Једноставан је за употребу, што га чини савршеним за програмере који су почетници у изради захтева за преузимање.

Можете да користите исоморпхиц-унфетцх као полифил за старије прегледаче који не подржавају изворни АПИ за преузимање. Библиотека изоморфно-унфетцх је минималистичка и погодна за рад на малим апликацијама.

Да бисте користили исоморпхиц-унфетцх у апликацији Нект.јс, инсталирајте библиотеку тако што ћете покренути следећу команду:

нпм инсталл исоморпхиц-унфетцх

Затим можете да увезете библиотеку и да је користите у својој компоненти за преузимање података, на следећи начин:

увоз Дохвати из'изоморфно-недохвати'
увоз {усеСтате, усеЕффецт} из'реаговати'
извозУобичајенофункцијаКућа() {
конст [подаци, сетДата] = усеСтате(нула)
 усеЕффецт(() => {
 Дохвати(' https://api.example.com/data')
 .онда( (одговор) => респонсе.јсон)
 .онда( (података) => сетДата (подаци) )
 }, [])

ако (!подаци) повратак<див>Учитавање...див>
повратак (


{дата.наме}</h1>
 </div>
 )
}

Функција исоморпхиц-унфетцх ради и на страни клијента и на страни сервера.

Ефикасно преузимање података са Нект.јс

Дохваћање података је важна карактеристика при развоју апликација. Нект.јс пружа неколико начина за преузимање података, од којих сваки има своје предности и компромисе.

Када одлучујете о методи коју ћете користити, узмите у обзир компромисе и осигурајте да користите технику која вам одговара.