Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.
Renderowanie to proces konwersji kodu React na HTML. Wybrana metoda renderowania zależy od danych, z którymi pracujesz, oraz od tego, jak bardzo zależy Ci na wydajności.
W Next.js renderowanie jest bardzo wszechstronne. Możesz renderować strony po stronie klienta lub po stronie serwera, statycznie lub przyrostowo.
Przyjrzyj się, jak działają te metody i jak działają.
Renderowanie po stronie serwera
W przypadku renderowania po stronie serwera (SSR), gdy użytkownik odwiedza stronę internetową, przeglądarka wysyła żądanie do serwera dotyczące tej strony. Serwer w razie potrzeby pobiera potrzebne dane z bazy danych i przesyła je wraz z zawartością strony do przeglądarki. Następnie przeglądarka wyświetla go użytkownikowi.
Przeglądarka wysyła to żądanie dla każdego łącza, które klika użytkownik, co oznacza, że serwer przetwarza żądanie za każdym razem.
Może to zmniejszyć wydajność witryny. Jednak renderowanie po stronie serwera jest idealne dla stron, które zużywają dane dynamiczne.
Użyj getServerSideProps, aby odbudować stronę za każdym razem, gdy użytkownik o to poprosi.
eksportdomyślnyfunkcjonowaćDom({ dane }) {
powrót (
<główny>
// Używaćdane
</main>
);
}eksportasynchronicznyfunkcjonowaćgetServerSideProps() {
// Pobierz dane z zewnętrznego API
konst res = czekać na pobierz('https://.../data')
konst dane = czekać na res.json()
// Zostanie przekazany do komponentu strony jako rekwizyty
powrót { rekwizyty: { dane } }
}
getServerSideProps działa tylko na serwerze i działa tak:
- Gdy użytkownik uzyskuje bezpośredni dostęp do strony, jest ona uruchamiana w czasie żądania, a strona jest wstępnie renderowana ze zwróconymi rekwizytami.
- Gdy użytkownik uzyskuje dostęp do strony za pośrednictwem łącza Dalej, przeglądarka wysyła żądanie do serwera, który ją uruchamia.
W nowej wersji możesz włączyć renderowanie po stronie serwera za pomocą dynamicznego pobierania danych na stronie lub w układzie.
Dynamiczne pobieranie danych to żądania fetch(), które w szczególności rezygnują z buforowania, ustawiając opcję pamięci podręcznej na „no-store”.
aportować('https://...', { Pamięć podręczna: 'brak sklepu' });
Alternatywnie ustaw ponowną walidację na 0:
aportować('https://...', { następny: { rewalidacja: 0 } });
Ta funkcja jest obecnie w fazie beta, więc miej to na uwadze. Możesz przeczytać więcej o dynamicznym pobieraniu danych w Next.js 13 dokumentów beta.
Renderowanie po stronie klienta
Renderowania po stronie klienta (CSR) należy używać, gdy trzeba często aktualizować dane lub gdy nie chcesz wstępnie renderować strony. Możesz wdrożyć CSR na poziomie strony lub komponentu. Na poziomie strony Next.js pobiera dane w czasie wykonywania, a gdy odbywa się to na poziomie komponentu, pobiera dane podczas montowania. Z tego powodu CSR może przyczynić się do spowolnienia wydajności.
Użyj useEffect() hak renderować strony na kliencie w ten sposób:
import { stan użycia, efekt użycia } z 'reagować'
funkcjonowaćDom() {
konst [dane, setData] = useState(zero)
konst [jest ładowanie, ładowanie set] = useState(FAŁSZ)użyjEfektu(() => {
ładowanie zestawu(PRAWDA)aportować('/api/get-data')
.then((res) => res.json())
.then((dane) => {
setData (dane)
ładowanie zestawu(FAŁSZ)
})
}, [])if (isLoading) powróci <P>Ładowanie...</P>
jeśli (!dane) powrócą <P>Brak danych</P>
powrót (
<dz>
// Używaćdane
</div>
)
}
Możesz także użyć haka SWR. Przechowuje dane w pamięci podręcznej i weryfikuje je ponownie, jeśli staną się nieaktualne.
import użyj SWR z „swr”
pobieranie const = (...argumenty) => pobierz(...argumenty).then((res) => res.json())
funkcjonowaćDom() {
konst { dane, błąd } = useSWR('/api/dane”, pobieracz)
jeśli (błąd) powróci <dz>Nie udało się załadować</div>
jeśli (!dane) powrócą <dz>Ładowanie...</div>
powrót (
<dz>
// Używaćdane
</div>
)
}
W Next.js 13 musisz użyć komponentu klienta, dodając dyrektywę „użyj klienta” na początku pliku.
"używaćklient";
eksportdomyślny () => {
powrót (
<dz>
// Komponent klienta
</div>
);
};
Różnica między SSR i CSR polega na tym, że dane są pobierane przy każdym żądaniu strony na serwerze w SSR, podczas gdy dane są pobierane po stronie klienta w CSR.
Generowanie witryn statycznych
Z generowaniem witryn statycznych (SSG), strona pobiera dane raz w czasie budowy. Strony generowane statycznie są bardzo szybkie i działają dobrze, ponieważ wszystkie strony są budowane wcześniej. SSG jest zatem idealny dla stron, które używają treści statycznych, takich jak strony sprzedażowe lub blogi.
W Next.js musisz wyeksportować funkcję getStaticProps na stronie, którą chcesz renderować statycznie.
eksportdomyślnyfunkcjonowaćDom({ dane }) {
powrót (
<główny>
// Używaćdane
</main>
);
}eksportasynchronicznyfunkcjonowaćgetStaticProps() {
// Pobieranie danych z zewnętrznego interfejsu API w czasie kompilacji
konst res = czekać na pobierz('https://.../data')
konst dane = czekać na res.json()
// Zostanie przekazany do komponentu strony jako rekwizyty
powrót { rekwizyty: { dane } }
}
Możesz także wysłać zapytanie do bazy danych wewnątrz getStaticProps.
eksportasynchronicznyfunkcjonowaćgetStaticProps() {
// DzwonićfunkcjonowaćDoaportowaćdanezBaza danych
konst dane = czekać na getDataFromDB()
powrót { rekwizyty: { dane } }
}
W Next.js 13 renderowanie statyczne jest ustawieniem domyślnym, a zawartość jest pobierana i zapisywana w pamięci podręcznej, chyba że wyłączysz opcję buforowania.
asynchronicznyfunkcjonowaćotrzymać dane() {
konst res = czekać na pobierz('https://.../data');
powrót res.json();
}
eksportdomyślnyasynchronicznyfunkcjonowaćDom() {
konst dane = czekać na otrzymać dane();
powrót (
<główny>
// Używaćdane
</main>
);
}
Dowiedz się więcej o renderowanie statyczne w Next.js 13 z dokumentów.
Generowanie przyrostowe-statyczne
Są chwile, kiedy chcesz korzystać z SSG, ale także chcesz regularnie aktualizować zawartość. Tutaj pomaga przyrostowe generowanie statyczne (ISG).
ISG umożliwia tworzenie lub aktualizowanie statycznych stron po ich zbudowaniu po określonym przez Ciebie przedziale czasu. W ten sposób nie musisz przebudowywać całej witryny, tylko strony, które tego potrzebują.
ISG zachowuje zalety SSG z dodatkową korzyścią w postaci udostępniania użytkownikom aktualnych treści. ISG jest idealny dla tych stron w Twojej witrynie, które zużywają zmieniające się dane. Na przykład możesz użyj ISR do renderowania postów na blogu tak, aby blog był aktualizowany podczas edytowania postów lub dodawania nowych.
Aby użyć ISR, dodaj właściwość rewalidacji do funkcji getStaticProps na stronie.
eksportasynchronicznyfunkcjonowaćgetStaticProps() {
konst res = czekać na pobierz('https://.../data')
konst dane = czekać na res.json()
powrót {
rekwizyty: {
dane,
},
rewalidacja: 60
}
}
Tutaj Next.js spróbuje odbudować stronę, gdy żądanie nadejdzie po 60 sekundach. Kolejne żądanie spowoduje odpowiedź ze zaktualizowaną stroną.
W Next.js 13 użyj rewalidacji w pobieraniu w następujący sposób:
aportować('https://.../data', { następny: { rewalidacja: 60 } });
Możesz ustawić przedział czasu na taki, który najlepiej pasuje do Twoich danych.
Jak wybrać metodę renderowania
Do tej pory poznałeś cztery metody renderowania w Next.js — CSR, SSR, SSG i ISG. Każda z tych metod jest odpowiednia dla różnych sytuacji. CSR jest przydatny na stronach, które potrzebują świeżych danych, gdzie silne SEO nie jest problemem. SSR jest również świetny dla stron, które zużywają dynamiczne dane, ale jest bardziej przyjazny dla SEO.
SSG jest odpowiedni dla stron, których dane są w większości statyczne, podczas gdy ISG jest najlepszy dla stron zawierających dane, które chcesz aktualizować w odstępach czasu. SSG i ISG są świetne pod względem wydajności i SEO, ponieważ dane są wstępnie pobierane i można je buforować.
