Skip to content
Polski
Wróć do katalogu

astro.build

200 OK

Jak Astro przekształca treść w HTML i selektywnie dodaje interakcje

Developer ToolsTailwind CSS

Wykryte technologie

Wykrywanie pokazuje widoczne sygnały publiczne i nie może wyliczyć usług prywatnych.

Tailwind CSS

Wykrywanie pokazuje widoczne sygnały publiczne i nie może wyliczyć usług prywatnych.

Wykrywanie pokazuje widoczne sygnały publiczne i nie może wyliczyć usług prywatnych.

Najpierw HTML, interakcje jako wyjątek

Astro to framework stawiający serwer na pierwszym miejscu, przeznaczony do witryn opartych na treści. Renderuje zawartość strony jako HTML i domyślnie nie wysyła JavaScriptu po stronie klienta; programiści jawnie dodają kod przeglądarkowy do komponentów, które wymagają interakcji.

Interaktywny komponent na stronie, która poza nim pozostaje statyczna, nazywany jest wyspą. Kontrolka nawigacyjna, interfejs wyszukiwania lub inny widżet może uwodnić się niezależnie, podczas gdy pobliskie nagłówki, akapity i odnośniki pozostają zwykłym kodem HTML.

Obszar strony Początkowo dostarczane elementy Zachowanie w przeglądarce
Statyczna treść Astro HTML renderowany na serwerze Domyślnie bez środowiska uruchomieniowego komponentów
Uwodniona wyspa HTML wraz z kodem wybranego komponentu Aktywuje się niezależnie
Wiele wysp HTML wraz z kodem wybranym dla każdej wyspy Każda wyspa może używać własnego priorytetu wczytywania

Moment uwadniania jest określany jawnie. client:load nadaje priorytet kontrolce potrzebnej natychmiast, client:idle odracza pracę do czasu bezczynności przeglądarki, a client:visible czeka, aż komponent zbliży się do obszaru widocznego strony.

Integracje i uporządkowana treść

Astro może używać React, Preact, Svelte, Vue, Solid, HTMX, komponentów webowych i innych podejść do UI w obszarach interaktywnych. Pozwala to selektywnie wykorzystywać znane systemy komponentów bez przekształcania całego dokumentu w jedną aplikację renderowaną po stronie klienta.

Przydatne obszary ekosystemu wskazane przez utrzymywane repozytorium obejmują:

  • Integracje UI dla React, Preact, Solid, Svelte i Vue.
  • Obsługę środowiska uruchomieniowego Node oraz adaptery wdrożeniowe.
  • Narzędzia publikacyjne, takie jak integracje MDX, RSS i map witryn.
  • Integrację skryptów za pośrednictwem Partytown.

Kolekcje treści porządkują i weryfikują Markdown oraz powiązane wpisy z bezpieczeństwem typów TypeScript. W praktyce zespół może określić spójną strukturę artykułów lub dokumentacji, wykrywać nieprawidłowe pola treści i odpytywać spójną kolekcję zamiast traktować każdy plik jako niepowiązany.

Dowody a wyniki implementacji

Publiczna dokumentacja Astro i utrzymywane repozytorium potwierdzają twierdzenia dotyczące renderowania stawiającego HTML na pierwszym miejscu, opcjonalnego uwadniania, obsługiwanych podejść do UI i kolekcji treści. Opisują możliwości i ustawienia domyślne frameworka, a nie jakość każdej witryny zbudowanej przy użyciu Astro.

Gotowy projekt może nadal zawierać duże wyspy, kilka środowisk uruchomieniowych frameworków, ciężkie obrazy, czcionki lub skrypty zewnętrzne. Wybory te mogą wpływać na wydajność i utrzymanie, dlatego odwiedzający powinni odróżniać udokumentowany model Astro od wyników, których ocena wymaga zbadania konkretnej implementacji. To samo rozróżnienie dotyczy dostępności i niezawodności: framework dostarcza narzędzia architektoniczne, natomiast gotowe doświadczenie zależy od sposobu ich użycia przez zespół.

Continue exploring

More published records in Developer Tools.

View all alternatives

Gatsby łączy witryny React z ustrukturyzowaną treścią i elastycznym renderowaniem

Developer ToolsGoogle Analytics

Next.js wzbogaca Reacta o routing, renderowanie i funkcje serwerowe

Developer ToolsGoogle AnalyticsNext.js

nuxt.com

200 OK

Twórz witryny i aplikacje Vue z routingiem, logiką serwerową i elastycznym renderowaniem

Developer ToolsNuxtVercel