Wprowadzenie:
\nReact od lat by\u0142 synonimem aplikacji po stronie klienta (CSR). Ale z czasem pojawi\u0142y si\u0119 Next.js, Gatsby i Remix, kt\u00f3re przesun\u0119\u0142y ci\u0119\u017car w stron\u0119 server-side renderingu (SSR). Teraz Next.js 13+ z Server Components (RSC) idzie o krok dalej \u2013 cz\u0119\u015b\u0107 komponent\u00f3w renderuje si\u0119 ca\u0142kowicie po stronie serwera, bez JavaScriptu dla klienta. Czy to faktycznie rewolucja, kt\u00f3ra zabija CSR? Czy mo\u017ce kolejny buzzword, kt\u00f3ry wprowadza zam\u0119t w zespo\u0142ach? W tym artykule przygl\u0105dam si\u0119 RSC z perspektywy praktyka: kiedy faktycznie dzia\u0142aj\u0105, a kiedy lepiej da\u0107 sobie spok\u00f3j.<\/p>\n
Sekcja 1: Czym s\u0105 Server Components i dlaczego nie s\u0105 tylko kolejnym hype\u2019em
\nServer Components w Next.js to nie to samo co SSR. W SSR serwer wysy\u0142a HTML, ale potem klient i tak musi pobra\u0107 ca\u0142y JavaScript, aby \u201ezahydratowa\u0107\u201d stron\u0119. W RSC komponenty renderuj\u0105 si\u0119 na serwerze i wysy\u0142aj\u0105 do klienta gotow\u0105 struktur\u0119 \u2013 bez JavaScriptu dla tych konkretnych komponent\u00f3w. Oznacza to mniejsze bundle, szybszy czas do interakcji (TTI) i lepszy UX. <\/p>\n
Przyk\u0142ad: dashboard analityczny, kt\u00f3ry wy\u015bwietla statyczne wykresy \u2013 z RSC nie trzeba pobiera\u0107 bibliotek chart\u00f3w po stronie klienta. Oszcz\u0119dno\u015b\u0107 setek KB. <\/p>\n
Ale to nie dzia\u0142a wsz\u0119dzie. Klient-server interactive? Potrzebujesz hybrydy.<\/p>\n
Sekcja 2: Gdzie RSC faktycznie daj\u0105 warto\u015b\u0107
\nRSC b\u0142yszcz\u0105 tam, gdzie potrzebujemy szybkiego wy\u015bwietlania danych, kt\u00f3re nie zmieniaj\u0105 si\u0119 cz\u0119sto lub s\u0105 pobierane z baz danych. Na przyk\u0142ad: listy produkt\u00f3w w e-commerce (ceny, opisy), artyku\u0142y blogowe, strony dokumentacji. Dla takich przypadk\u00f3w RSC drastycznie redukuj\u0105 rozmiar JS i przyspieszaj\u0105 czas pierwszej kalkulacji. <\/p>\n
Widzia\u0142em projekty, gdzie przeniesienie widoku listy zam\u00f3wie\u0144 na RSC skr\u00f3ci\u0142o load czasu o 40% \u2013 bo ca\u0142a logika fetchowania i formatowania danych posz\u0142a na serwer. Klient dosta\u0142 ju\u017c gotowy HTML z danymi.<\/p>\n
Dla zespo\u0142\u00f3w: to zmiana mentalna \u2013 nie ka\u017cdy komponent musi by\u0107 interaktywny. Wa\u017cne, \u017ceby decyzja by\u0142a \u015bwiadoma.<\/p>\n
Sekcja 3: Pu\u0142apki i momenty, gdy RSC nie s\u0105 dobrym pomys\u0142em
\nRSC maj\u0105 ograniczenia: nie mog\u0105 korzysta\u0107 z useState, useEffect, event\u00f3w, ani innych hook\u00f3w. To znaczy, \u017ce ka\u017cda interakcja (np. klikni\u0119cie przycisku) wymaga Client Component. <\/p>\n
Problem: zbyt agresywne stosowanie RSC prowadzi do dziwnej architektury, gdzie komponent rodzica jest serwerowy, ale dzieci maj\u0105 by\u0107 klienckie \u2013 to wymaga ostro\u017cnego dzielenia komponent\u00f3w. <\/p>\n
Przyk\u0142ad z \u017cycia: klient chcia\u0142 wyszukiwark\u0119 z autocomplete \u2013 ca\u0142a strona by\u0142a RSC. Aby doda\u0107 input, trzeba by\u0142o opakowa\u0107 go w Client Component i przekazywa\u0107 props przez serwer. Efekt: kod sta\u0142 si\u0119 mniej czytelny, a oszcz\u0119dno\u015b\u0107 na JS by\u0142a minimalna, bo autocomplete i tak wymaga sporej biblioteki.<\/p>\n
Dodatkowo: RSC to nowo\u015b\u0107 \u2013 wiele bibliotek nie jest jeszcze kompatybilnych. Starsze pakiety czy customowe hooki mog\u0105 nie dzia\u0142a\u0107.<\/p>\n
Sekcja 4: Jak to wp\u0142ywa na strategi\u0119 frontendow\u0105 firm
\nDecyzja o RSC powinna by\u0107 podyktowana profilem aplikacji. Je\u015bli g\u0142\u00f3wnym zadaniem jest wy\u015bwietlanie tre\u015bci (content-heavy), RSC s\u0105 strza\u0142em w dziesi\u0105tk\u0119. Je\u015bli aplikacja jest bogata w interakcje (np. panel administracyjny z drag&drop), RSC mog\u0105 przynie\u015b\u0107 wi\u0119cej zamieszania ni\u017c korzy\u015bci.<\/p>\n
Rekomendacja: nie patrz na hype, ale na rzeczywiste potrzeby. Przetestuj RSC na jednej \u015bcie\u017cce u\u017cytkownika, zmierz wydajno\u015b\u0107 i oce\u0144 utrzymanie kodu.<\/p>\n
Dla CTO: to decyzja o stacku \u2013 je\u015bli planujesz Next.js, warto przygotowa\u0107 zesp\u00f3\u0142 na mentaln\u0105 zmian\u0119. Tradycyjny React cz\u0119sto uczy\u0142 my\u015ble\u0107 w kategorii stanu klienckiego. RSC odwracaj\u0105 to \u2013 im wi\u0119cej na serwerze, tym lepiej. To mo\u017ce by\u0107 trudne dla junior\u00f3w.<\/p>\n
Podsumowanie:
\nServer Components Next.js nie zabij\u0105 Reacta po stronie klienta \u2013 ale zmieniaj\u0105 regu\u0142y gry. Dla odpowiednich przypadk\u00f3w to ogromna oszcz\u0119dno\u015b\u0107 wydajno\u015bci. Dla innych \u2013 b\u00f3l g\u0142owy. Klucz to \u015bwiadomy wyb\u00f3r architektury, a nie \u015blepe pod\u0105\u017canie za trendem. W JurskiTech pomagamy firmom podejmowa\u0107 takie decyzje \u2013 analizujemy profil aplikacji, testujemy rozwi\u0105zania i doradzamy co naprawd\u0119 dzia\u0142a.<\/p>\n","protected":false},"excerpt":{"rendered":"
Wprowadzenie: React od lat by\u0142 synonimem aplikacji po stronie klienta (CSR). Ale z czasem pojawi\u0142y si\u0119 Next.js, Gatsby i Remix, kt\u00f3re przesun\u0119\u0142y ci\u0119\u017car w stron\u0119 server-side renderingu (SSR). Teraz Next.js 13+ z Server Components (RSC) idzie o krok dalej \u2013 cz\u0119\u015b\u0107 komponent\u00f3w renderuje si\u0119 ca\u0142kowicie po stronie serwera, bez JavaScriptu dla klienta. Czy to faktycznie<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1003,50,47,109,345],"class_list":["post-2846","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-debugowanie-wydajnosci","tag-next-js","tag-react","tag-react-server-components","tag-ssr"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2846"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2846\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}