{"id":54981,"date":"2024-08-28T07:00:00","date_gmt":"2024-08-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54981"},"modified":"2025-05-26T10:58:16","modified_gmt":"2025-05-26T17:58:16","slug":"komponenty-serwera-react","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/komponenty-serwera-react\/","title":{"rendered":"React Server Components: Przysz\u0142o\u015b\u0107 rozwoju React"},"content":{"rendered":"

React by\u0142 pot\u0119g\u0105 w tworzeniu aplikacji internetowych przez ostatnie dziesi\u0119\u0107 lat<\/a>.<\/p>\n

Wszyscy widzieli\u015bmy, jak ewoluowa\u0142o to od niepor\u0119cznych komponent\u00f3w klasowych do elegancji hak\u00f3w.<\/p>\n

Ale React Server Components (RSCs)?<\/p>\n

Nikt chyba nie spodziewa\u0142 si\u0119 tak dramatycznej zmiany w dzia\u0142aniu React.<\/p>\n

Wi\u0119c, czym dok\u0142adnie s\u0105 Komponenty Serwera React? Jak dzia\u0142aj\u0105? I co robi\u0105 inaczej, czego React ju\u017c nie m\u00f3g\u0142 zrobi\u0107?<\/p>\n

Aby odpowiedzie\u0107 na wszystkie te pytania, szybko om\u00f3wimy podstawy. Je\u015bli potrzebujesz przypomnienia, rzuci\u0107 okiem na ten przewodnik jak nauczy\u0107 si\u0119 Reacta jako pocz\u0105tkuj\u0105cy<\/a>.<\/p>\n

W tym po\u015bcie przeprowadzimy Ci\u0119 przez powody, dla kt\u00f3rych potrzebowali\u015bmy komponent\u00f3w serwerowych React, jak dzia\u0142aj\u0105, oraz jakie s\u0105 g\u0142\u00f3wne korzy\u015bci z RSCs.<\/p>\n

Zacznijmy!<\/p>\n

Czym s\u0105 komponenty serwerowe React?<\/h2>\n
\"Diagram<\/figure>\n

Pomy\u015bl o komponentach serwera React jako o nowym sposobie tworzenia aplikacji React. Zamiast dzia\u0142a\u0107 w przegl\u0105darce jak typowe komponenty React, RSC dzia\u0142aj\u0105 bezpo\u015brednio na twoim serwerze.<\/p>\n

\u201eMy\u015bl\u0119, \u017ce RSC maj\u0105 by\u0107 “komponentyzacj\u0105” backendu, czyli odpowiednikiem backendu tego, co SPA React<\/a> zrobi\u0142 dla frontendu. W teorii, mog\u0142yby w du\u017cym stopniu wyeliminowa\u0107 potrzeb\u0119 stosowania takich technologii jak REST i GraphQL, prowadz\u0105c do znacznie \u015bci\u015blejszej integracji mi\u0119dzy serwerem a klientem, poniewa\u017c komponent m\u00f3g\u0142by przej\u015b\u0107 przez ca\u0142y stos.\u201d \u2014 ExternalBison54 na Reddit<\/a><\/p><\/blockquote>\n

Skoro RSC wykonuje si\u0119 bezpo\u015brednio na serwerze, mo\u017ce on efektywnie korzysta\u0107 z zasob\u00f3w backend, takich jak bazy danych i APIs<\/a> bez dodatkowej warstwy pobierania danych.<\/p>\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

API<\/h3>\n

Interfejs Programowania Aplikacji (API) to zbi\u00f3r funkcji umo\u017cliwiaj\u0105cych aplikacjom dost\u0119p do danych i interakcj\u0119 z komponentami zewn\u0119trznymi, pe\u0142ni\u0105cy rol\u0119 kuriera mi\u0119dzy klientem a serwerem.<\/p>\n \n Czytaj wi\u0119cej <\/a>\n\n<\/div>\n\n

Ale dlaczego w og\u00f3le potrzebowali\u015bmy RSC?<\/strong><\/p>\n

Aby odpowiedzie\u0107 na to pytanie, cofnijmy si\u0119 nieco.<\/p>\n

Tradycyjny React: Renderowanie po stronie klienta (CSR)<\/h2>\n

React zawsze by\u0142 bibliotek\u0105 interfejsu u\u017cytkownika po stronie klienta.<\/p>\n

Podstawowa idea stoj\u0105ca za Reactem polega na podzieleniu ca\u0142ego projektu na mniejsze, niezale\u017cne jednostki nazywane komponentami. Te komponenty mog\u0105 zarz\u0105dza\u0107 w\u0142asnymi prywatnymi danymi (stan<\/strong>) i przekazywa\u0107 dane mi\u0119dzy sob\u0105 (w\u0142a\u015bciwo\u015bci<\/strong>).<\/p>\n

Pomy\u015bl o tych komponentach jak o funkcjach JavaScript<\/a>, kt\u00f3re s\u0105 pobierane i uruchamiane bezpo\u015brednio w przegl\u0105darce u\u017cytkownika. Kiedy kto\u015b odwiedza Twoj\u0105 aplikacj\u0119, jego przegl\u0105darka pobiera ca\u0142y kod komponentu, a React wkracza, aby wszystko wyrenderowa\u0107:<\/p>\n

\"Schemat<\/figure>\n