Tryby renderowania

Kod Twojego projektu Astro musi zostać wyrenderowany do HTML, aby można go było wyświetlić w sieci.

Strony, ścieżki i endpointy API w Astro mogą być pre-renderowane w czasie budowania lub wyrenderowane na żądanie przez serwer w momencie, gdy ścieżka jest żądana. Dzięki wyspom Astro możesz również w razie potrzeby uwzględnić renderowanie po stronie klienta.

W Astro większość przetwarzania odbywa się na serwerze, a nie w przeglądarce. To zazwyczaj sprawia, że Twoja strona lub aplikacja działa szybciej niż przy renderowaniu po stronie klienta, zwłaszcza na mniej wydajnych urządzeniach lub przy wolniejszych łączach internetowych. Wyrenderowany HTML po stronie serwera jest szybki, przyjazny dla SEO i domyślnie dostępny.

Tryby output serwera

Dział zatytułowany Tryby output serwera

Możesz skonfigurować sposób renderowania swoich stron w konfiguracji output.

Pre-renderowane

Dział zatytułowany Pre-renderowane

Domyślnym trybem renderowania jest output: 'static', który tworzy HTML dla wszystkich ścieżek Twojej strony w czasie budowania.

W tym trybie, cała Twoja strona będzie pre-renderowana, a serwer będzie miał wszystkie strony zbudowane z wyprzedzeniem i gotowe do wysłania do przeglądarki. Ten sam dokument HTML jest wysyłany do przeglądarki dla każdego odwiedzającego, a do aktualizacji zawartości strony wymagana jest pełna przebudowa witryny. Metoda ta znana jest również jako statyczne generowanie stron (SSG).

Domyślnie wszystkie projekty Astro są skonfigurowane tak, aby były wstępnie renderowane w czasie kompilacji (generowane statycznie), aby zapewnić jak najlżejsze doświadczenia w przeglądarce. Przeglądarka nie musi czekać na generowanie HTML, ponieważ serwer nie musi tworzyć stron na żądanie. Twoja strona nie jest zależna od wydajności backendowego źródła danych, a po zbudowaniu pozostanie dostępna dla odwiedzających jako strona statyczna, tak długo, jak Twój serwer będzie działał.

Statyczne strony mogą zawierać wyspy Astro dla interaktywnych komponentów UI (lub nawet całych osadzonych aplikacji renderowanych po stronie klienta!) napisanych w wybranym przez Ciebie frameworku UI na statycznej, pre-renderowanej stronie.

View Transitions API jest również dostępne w trybie static do animacji i zachowania stanu podczas nawigacji między stronami. Statyczne strony mogą również używać middleware do przechwytywania i przekształcania danych odpowiedzi z requesta.

Wskazówka

Domyślny tryb static Astro to potężny, nowoczesny wybór dla stron z dużą ilością treści, które rzadko się aktualizują i wyświetlają tę samą zawartość wszystkim odwiedzającym.

Renderowane na żądanie

Dział zatytułowany Renderowane na żądanie

Dzięki adapterowi SSR, pozostałe dwa tryby output Astro mogą być skonfigurowane do włączenia renderowania na żądanie niektórych lub wszystkich Twoich stron, ścieżek lub endpointów API:

• output: 'server' dla bardzo dynamicznych stron z większością lub wszystkimi ścieżkami renderowanymi na żądanie.
• output: 'hybrid' dla głównie statycznych stron z niektórymi ścieżkami renderowanymi na żądanie.

Ponieważ są generowane przy każdym odwiedzeniu, te ścieżki mogą być dostosowane dla każdego użytkownika. Na przykład: strona renderowana na żądanie może pokazać zalogowanemu użytkownikowi informacje o jego koncie lub wyświetlić świeżo zaktualizowane dane bez konieczności pełnego przebudowania strony. Renderowanie na żądanie po stronie serwera w czasie żądania jest również znane jako server-side rendering (SSR).

Przeczytaj więcej o funkcjach dostępnych dla Ciebie dzięki renderowaniu na żądanie i adapterowi, takich jak cookies, obiekty Response i Request, strumieniowanie HTML i inne.

Rozważ włączenie trybu server lub hybrid w swoim projekcie Astro, jeśli potrzebujesz następujących funkcji:

• API endpoints: Twórz konkretne strony działające jako endpoint API dla zadań takich jak dostęp do bazy danych, uwierzytelnianie i autoryzacja, jednocześnie utrzymując wrażliwe dane ukryte przed klientem.

• Chronione strony: Ogranicz dostęp do strony na podstawie uprawnień użytkownika, obsługując dostęp użytkownika na serwerze.

• Często zmieniająca się zawartość: Generuj indywidualne strony bez konieczności statycznego przebudowywania witryny. Jest to przydatne, gdy zawartość strony często się aktualizuje, na przykład wyświetlanie danych z API wywoływanego dynamicznie za pomocą fetch().

Oba tryby wyjściowe server and hybrid pozwalają na włączenie wysp Astro do interaktywności (a nawet całych osadzonych aplikacji renderowanych po stronie klienta!) w wybranych przez Ciebie frameworkach UI. Dzięki middleware i View Transitions API do animacji i zachowania stanu podczas nawigacji między stronami, możliwe są nawet bardzo interaktywne aplikacje.

Wskazówka

Renderowanie na żądanie po stronie serwera w Astro, zwłaszcza w połączeniu z view transitions, zapewnia prawdziwe doświadczenie aplikacji bez dodatkowego obciążenia JavaScript typowego dla aplikacji single-page po stronie klienta.