Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.

Рендирането е процес на конвертиране на React код в HTML. Методът на изобразяване, който избирате, зависи от данните, с които работите, и от това колко държите на производителността.

В Next.js изобразяването е много гъвкаво. Можете да визуализирате страници от страна на клиента или от страна на сървъра, статично или постепенно.

Разгледайте как работят тези методи и как се представя всеки от тях.

Изобразяване от страна на сървъра

При изобразяване от страна на сървъра (SSR), когато потребител посети уеб страница, браузърът изпраща заявка до сървъра за тази страница. Сървърът извлича необходимите данни от базата данни, ако е необходимо, и ги изпраща заедно със съдържанието на страницата към браузъра. След това браузърът го показва на потребителя.

Браузърът прави тази заявка за всяка връзка, върху която потребителят кликне, което означава, че сървърът обработва заявката всеки път.

instagram viewer

Това може да намали ефективността на уебсайта. Рендирането от страна на сървъра обаче е идеално за страници, които консумират динамични данни.

Използвайте getServerSideProps, за да възстановявате страницата всеки път, когато потребител я поиска.

износпо подразбиранефункцияУ дома({ данни }) {
връщане (
<основен>
 // Използвайтеданни
</main>
 );
}
износасинхроненфункцияgetServerSideProps() {
// Извличане на данни от външен API
конст res = изчакайте fetch('https://.../data')
конст данни = изчакайте res.json()
// Ще бъде предадено на компонента на страницата като реквизити
връщане { реквизит: { данни } }
}

getServerSideProps работи само на сървъра и ето как работи:

  • Когато потребител осъществи директен достъп до страницата, тя се изпълнява по време на заявка и страницата се изобразява предварително с реквизитите, които връща.
  • Когато потребител получи достъп до страницата чрез връзка Next, браузърът изпраща заявка до сървъра, който я изпълнява.

В новата версия можете да изберете изобразяване от страна на сървъра, като използвате динамични извличания на данни в страница или оформление.

Динамичните извличания на данни са fetch() заявки, които специално се отказват от кеширане, като задават опцията за кеш на „без съхраняване“.

извличане ('https://...', {кеш: 'без магазин' });

Като алтернатива задайте повторно валидиране на 0:

извличане ('https://...', { следващ: { повторно валидиране: 0 } });

Тази функция в момента е в бета версия, така че имайте това предвид. Можете да прочетете повече за динамичното извличане на данни в Next.js 13 бета документи.

Изобразяване от страна на клиента

Трябва да използвате изобразяване от страна на клиента (CSR), когато трябва често да актуализирате данни или когато не искате да изобразявате страницата си предварително. Можете да внедрите CSR на ниво страница или ниво компонент. На ниво страница Next.js извлича данни по време на изпълнение и когато е готово на ниво компонент, извлича данни при монтиране. Поради това КСО може да допринесе за забавяне на работата.

Използвай useEffect() кука за изобразяване на страници на клиента по следния начин:

импортиране {useState, useEffect} от "реагира"
функцияУ дома() {
конст [данни, setData] = useState(нула)
конст [isLoading, setLoading] = useState(невярно)
useEffect(() => {
 setLoading(вярно)


извличане ('/api/get-data')
 .then((res) => res.json())
 .then((данни) => {
 setData (данни)
 setLoading(невярно)
 })
 }, [])


if (isLoading) връщане <стр>Зареждане...</стр>
 if (!data) върне <стр>Няма данни</стр>
връщане (
<див>
 // Използвайтеданни
</div>
 )
}

Можете да използвате и SWR куката. Той кешира данните и ги проверява отново, в случай че остареят.

импортиране използвайте КСВ от 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
функцияУ дома() {
конст {данни, грешка} = useSWR('/api/данни', средство за извличане)
 ако (грешка) връщане <див>Не успя да се зареди</div>
 if (!data) върне <див>Зареждане...</div>
връщане (
<див>
 // Използвайтеданни
</div>
 )
}

В Next.js 13 трябва да използвате клиентски компонент, като добавите директивата „използване на клиент“ в горната част на файла.

"използванеклиент";
износпо подразбиране () => {
връщане (
<див>
// Клиентски компонент
</div>
 );
};

Разликата между SSR и CSR е, че данните се извличат при всяка заявка за страница на сървъра в SSR, докато данните се извличат от страната на клиента в CSR.

Генериране на статичен сайт

С генериране на статичен сайт (SSG), страницата извлича данни веднъж по време на изграждането. Статично генерираните страници са много бързи и се представят добре, защото всички страници са създадени предварително. Следователно SSG е идеален за страници, които използват статично съдържание като страници за продажби или блогове.

В Next.js трябва да експортирате функцията getStaticProps в страницата, която искате да изобразите статично.

износпо подразбиранефункцияУ дома({ данни }) {
връщане (
<основен>
 // Използвайтеданни
</main>
 );
}
износасинхроненфункцияgetStaticProps() {
// Извличане на данни от външен API по време на изграждане
конст res = изчакайте fetch('https://.../data') 
конст данни = изчакайте res.json()
// Ще бъде предадено на компонента на страницата като реквизити
връщане { реквизит: { данни } }
}

Можете също да направите запитване към базата данни вътре в getStaticProps.

износасинхроненфункцияgetStaticProps() {
 // Обадете сефункцияда сеизвличамданниотбаза данни
конст данни = изчакайте getDataFromDB()
връщане { реквизит: { данни } }
}

В Next.js 13 статичното изобразяване е по подразбиране и съдържанието се извлича и кешира, освен ако не зададете опцията за кеширане на изключено.

асинхроненфункцияgetData() {
конст res = изчакайте fetch('https://.../data');
връщане res.json();
}
износпо подразбиранеасинхроненфункцияУ дома() {
конст данни = изчакайте getData();
връщане (
<основен>
 // Използвайтеданни
</main>
 );
}

Научете повече за статично изобразяване в Next.js 13 от документите.

Инкрементално-статично генериране

Има моменти, когато искате да използвате SSG, но също така искате да актуализирате редовно съдържанието. Това е мястото, където постепенното статично генериране (ISG) помага.

ISG ви позволява да създавате или актуализирате статични страници, след като сте ги изградили след зададения от вас интервал от време. По този начин не е необходимо да възстановявате целия сайт, а само страниците, които се нуждаят от него.

ISG запазва предимствата на SSG с допълнителната полза от предоставянето на актуално съдържание на потребителите. ISG е идеален за тези страници на вашия сайт, които консумират променящи се данни. Например можете използвайте ISR за изобразяване на публикации в блогове така че блогът да остане актуализиран, когато редактирате публикации или добавяте нови.

За да използвате ISR, добавете подложката за повторно валидиране към функцията getStaticProps на страница.

износасинхроненфункцияgetStaticProps() {
конст res = изчакайте fetch('https://.../data')
конст данни = изчакайте res.json()
връщане {
 подпори: {
 данни,
 },
 презаверка: 60
 }
}

Тук Next.js ще се опита да възстанови страницата, когато пристигне заявка след 60 секунди. Следващата заявка ще доведе до отговор с актуализираната страница.

В Next.js 13 използвайте revalidate във fetch по следния начин:

извличане ('https://.../data', { next: { revalidate: 60 } });

Можете да зададете интервала от време на това, което работи най-добре с вашите данни.

Как да изберем метод на изобразяване

Досега научихте за четирите метода за изобразяване в Next.js — CSR, SSR, SSG и ISG. Всеки от тези методи е подходящ за различни ситуации. CSR е полезно за страници, които се нуждаят от свежи данни, където силното SEO не е проблем. SSR също е страхотен за страници, които консумират динамични данни, но е по-подходящ за SEO.

SSG е подходящ за страници, чиито данни са предимно статични, докато ISG е най-добър за страници, съдържащи данни, които искате да актуализирате на интервали. SSG и ISG са страхотни по отношение на производителност и SEO, тъй като данните са предварително извлечени и можете да ги кеширате.