Astro vs Next.js: wyspy kontra Server Components | We.Inc
Astro generuje statyczny HTML z interaktywnymi wyspami, a Next.js buduje aplikacje React z Server Components. Porównaj tryby wyjściowe, interaktywność i hosting, a potem sprawdź swoje potrzeby.
Astro renderuje strony do HTML bez JavaScriptu po stronie klienta, chyba że dodasz wyspę z dyrektywą client, co czyni je świetnym wyborem dla stron z treścią. Next.js to framework React, w którym strony są domyślnie Server Components, a interaktywne części włącza się przez 'use client', co pasuje do produktów przypominających aplikacje, z logowaniem i dużą ilością stanu.
Porównanie Astro i Next.js
Temat
Astro
Domyślny wynik
Statyczny HTML, prerenderowany podczas builda
React renderowany na serwerze; opcjonalny eksport statyczny
Dodaj adapter, potem prerender = false lub output: 'server'
Wbudowane przy uruchomieniu next start
Odroczone części serwerowe
Wyspy serwerowe server:defer
Renderowanie serwerowe strumieniowane do klienta
Opcje hostingu
Dowolny hosting statyczny lub adaptery Node.js, Netlify, Vercel, Cloudflare
Serwer Node.js, Docker, eksport statyczny lub adaptery
Zaznacz potrzeby, które opisują Twój projekt. Każda przechyla szalę w stronę Astro lub Next.js z podanego powodu, a podsumowanie poniżej daje rekomendację na start, a nie ostateczny werdykt.
Zaznacz każde stwierdzenie, które jest prawdziwe dla Twojego projektu.
Przeczytaj uzasadnienie, które pojawia się pod każdą zaznaczoną potrzebą.
Sprawdź podsumowanie i rekomendację na dole.
Skorzystaj z przykładów kodu niżej, aby zobaczyć, jak każdy framework dodaje interaktywną część.
Strony z treścią i kilkoma widżetami to obszar, w którym Astro błyszczy. Każda strona pozostaje zwykłym HTML, poza oznaczonymi przez Ciebie wyspami.
Wybierz client:visible dla widżetów poniżej linii zgięcia. Astro czeka, aż wyspa pojawi się w widoku, zanim załaduje jej JavaScript.
W Next.js umieszczaj 'use client' jak najgłębiej. Oznacz pole wyszukiwania, a nie cały layout, aby paczki klienckie były małe.
Masz już komponenty React? Oba frameworki mogą z nich korzystać. W Astro zainstaluj integrację React poleceniem npx astro add react.
Najczęściej zadawane pytania
Czy Astro może używać komponentów React?
Tak. Po npx astro add react możesz zaimportować komponent React do strony .astro. Bez dyrektywy client renderuje się on tylko do statycznego HTML; dodaj client:load lub inną dyrektywę, aby był interaktywny.
Czy Astro służy tylko do stron statycznych?
Nie. Po zainstalowaniu adaptera serwerowego każda strona może zrezygnować z prerenderowania przez export const prerender = false, albo możesz ustawić output: 'server', aby renderować każdą stronę na żądanie i prerenderować tylko wybrane.
Czy wyspy Astro to to samo co React Server Components?
Rozwiązują podobny problem z przeciwnych stron. Astro zaczyna od zera JavaScriptu, a Ty dodajesz interaktywne wyspy. Next.js zaczyna od Reacta renderowanego na serwerze, a Ty oznaczasz części klienckie. Same React Server Components nigdy nie wysyłają swojego kodu do przeglądarki.
Co jest lepsze do bloga?
Zwykle Astro, bo blog to głównie tekst i obrazy, które nie potrzebują JavaScriptu. Next.js też dobrze radzi sobie z blogami i jest łatwiejszym wyborem, jeśli blog jest częścią większej aplikacji React.
Co jest lepsze do dashboardu lub aplikacji SaaS?
Zwykle Next.js. Ekrany po zalogowaniu z formularzami, danymi na żywo i współdzielonym stanem klienta wykorzystują mocne strony Reacta, a Route Handlers znajdują się w tym samym projekcie.
Jak działają wyspy Astro
Komponent Astro ma na górze blok skryptu, który działa tylko na serwerze, a pod nim szablon. Nigdy nie renderuje się po stronie klienta: wynikiem jest HTML wygenerowany podczas builda lub na żądanie.
Gdy część strony musi reagować na kliknięcia, wstawiasz komponent z React, Svelte, Vue lub innego obsługiwanego frameworka i nadajesz mu dyrektywę client. Tylko ta wyspa ładuje JavaScript, a dyrektywa decyduje kiedy: od razu, gdy przeglądarka jest bezczynna, gdy wyspa pojawi się w widoku lub gdy pasuje media query.
Jak działają Server Components w Next.js
W App Routerze Next.js layouty i strony są Server Components, chyba że wskażesz inaczej. Mogą bezpośrednio czytać bazy danych i sekrety, a ich kod nie trafia do przeglądarki.
Dodanie 'use client' do pliku wyznacza granicę. Ten plik, jego importy i renderowane przez niego komponenty trafiają do paczki klienckiej i są hydratowane, więc działają w nich stan, efekty i obsługa zdarzeń.
Podjęcie decyzji
Jeśli większość stron się czyta, a nie używa, zacznij od Astro. Jeśli większości stron się używa, a nie czyta, albo zespół żyje w React, zacznij od Next.js. Mieszane serwisy często prowadzą stronę marketingową w Astro, a aplikację w Next.js na subdomenie.
Dodanie jednej interaktywnej części w każdym
Strona Astro z wyspą React
Nagłówek i akapit trafiają do przeglądarki jako zwykły HTML. Tylko LikeButton ładuje JavaScript i to dopiero wtedy, gdy pojawi się w widoku.
Strona Next.js z Client Component
Strona jest Server Component. Plik z 'use client' to jedyna część hydratowana w przeglądarce.
Renderowanie na żądanie w Astro
Wynik serwerowy z adapterem Node.js
Najpierw uruchom npx astro add node. Przy output ustawionym na 'server' każda strona renderuje się na żądanie, chyba że eksportuje prerender = true.
Większość stron to artykuły, dokumentacja lub treści marketingowe
Komponenty Astro renderują się do HTML bez JavaScriptu po stronie klienta, a tylko tego potrzebuje strona do czytania.
Chcemy używać komponentów Svelte lub Vue obok React
Astro obsługuje React, Preact, Svelte, Vue i SolidJS na tej samej stronie.
Interaktywność ogranicza się do kilku widżetów
Dyrektywy client ładują JavaScript tylko dla tych wysp i tylko wtedy, gdy jest potrzebny.
Chcemy hostować na zwykłym hostingu plików statycznych
Wynik Astro jest domyślnie statyczny; eksport statyczny Next.js działa, ale traci funkcje wymagające serwera.
Większość ekranów jest dostępna po zalogowaniu
Ekrany po zalogowaniu z dużą ilością danych pasują do stanu React, a Server Components pobierają dane na serwerze.
Wiele komponentów współdzieli stan klienta
Aplikacja React z providerami kontekstu i Client Components obsługuje współdzielony stan bezpośrednio.
Chcemy mieć endpointy API w tym samym projekcie
Route Handlers znajdują się obok stron i działają zawsze, gdy serwis działa na swoim serwerze Node.js.
Nasz zespół już wszystko buduje w React
Next.js to React od góry do dołu, więc nie trzeba uczyć się drugiego modelu komponentów.
Co pasuje do Twojego projektu?
Potrzeby projektu
Astro: {a}, Next.js: {n}
Zaznacz potrzeby, które dotyczą Twojego projektu.
Skłaniaj się ku Astro.
Skłaniaj się ku Next.js.
Remis: oba się sprawdzą, więc wybierz ten, który zna Twój zespół.