Trasy serwera i tryby renderowania
Konfigurować prerender, SSR i CSR dla poszczególnych tras
Trasy serwera i tryby renderowania to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Jedno rozwiązanie nie pasuje do wszystkiego
Nie każda trasa powinna być renderowana w ten sam sposób. Angular SSR pozwala przypisać do każdej trasy tryb renderowania: renderowanie po stronie serwera, renderowanie po stronie klienta lub prerendering podczas kompilowania.
Trzy tryby
RenderMode.Server renderuje przy każdym żądaniu, RenderMode.Client renderuje wyłącznie w przeglądarce (CSR), a RenderMode.Prerender generuje statyczny kod HTML podczas kompilowania (SSG).
Konfiguracja tras serwera
Zdefiniuj tablicę ServerRoute[] mapującą ścieżki na tryby renderowania, a następnie udostępnij ją za pomocą provideServerRouting w konfiguracji serwera.
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '', renderMode: RenderMode.Prerender },
{ path: 'dashboard', renderMode: RenderMode.Client },
{ path: '**', renderMode: RenderMode.Server }
];Podłączanie konfiguracji
Zarejestruj trasy w konfiguracji aplikacji serwerowej, aby silnik SSR wiedział, jak obsługiwać każdą ścieżkę.
// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';
providers: [
provideServerRendering(),
provideServerRouting(serverRoutes)
]Kiedy stosować prerendering
Wybierz Prerender dla stabilnych, publicznych stron: strony głównej, sekcji „O nas” czy dokumentacji. Są one jednorazowo kompilowane do kodu HTML i natychmiast udostępniane z CDN, bez kosztu serwera przy każdym żądaniu.
Kiedy używać serwera
Wybierz Server dla stron, których treść zmienia się w zależności od żądania lub użytkownika, ale które nadal wymagają SEO albo szybkiego pierwszego wyświetlenia, na przykład strony produktu z aktualnym stanem magazynowym.
Kiedy używać klienta
Wybierz Client dla bardzo interaktywnych, prywatnych stron, na których SEO i szybkość pierwszego wyświetlenia mają niewielkie znaczenie, takich jak pulpit dostępny po zalogowaniu. Serwer wysyła szkielet, a przeglądarka wykonuje renderowanie.
Prerendering parametrów dynamicznych
W przypadku tras parametryzowanych należy poinformować prerenderer, które parametry ma wygenerować, zwracając listę za pomocą getPrerenderParams.
{
path: 'product/:id',
renderMode: RenderMode.Prerender,
async getPrerenderParams() {
const ids = await fetchProductIds();
return ids.map(id => ({ id }));
}
}Rezerwowy tryb dla prerenderingu
Parametry, dla których nie wykonano prerenderingu, mogą w czasie działania przejść do renderowania serwerowego lub klienckiego. Dzięki temu można prerenderować popularne elementy, a długi ogon renderować na żądanie.
Nagłówki i status dla poszczególnych tras
Trasy serwera mogą ustawiać nagłówki odpowiedzi i kody statusu, co przydaje się na przykład do określania zasad buforowania lub zwracania kodu 404 z procedury obsługi nieznalezionej trasy.
{
path: 'old-page',
renderMode: RenderMode.Server,
headers: { 'Cache-Control': 'no-store' }
}Strategiczne łączenie trybów
Rzeczywista aplikacja łączy różne tryby: prerenderuje strony marketingowe, renderuje po stronie serwera dynamiczne strony kluczowe dla SEO, a aplikację za logowaniem renderuje po stronie klienta. Pozwala to jednocześnie optymalizować koszty i wydajność.
Szybki test
Sprawdź swoją wiedzę o trybach renderowania.
Podsumowanie
Skonfigurowałeś renderowanie dla poszczególnych tras za pomocą ServerRoute[] i provideServerRouting: Prerender dla stabilnych stron publicznych, Server dla dynamicznych stron ważnych dla SEO oraz Client dla prywatnych, interaktywnych stron, w tym parametry prerenderingu dla tras dynamicznych.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „Trasy serwera i tryby renderowania” jest bezpłatna?
Tak — pełny tekst „Trasy serwera i tryby renderowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Trasy serwera i tryby renderowania”?
Konfigurować prerender, SSR i CSR dla poszczególnych tras Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Trasy serwera i tryby renderowania”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dlaczego renderowanie po stronie serwera
- Konfiguracja Angular SSR
- Trasy serwera i tryby renderowania
- Przekazywanie stanu do klienta