React Server Components

.

Rok 2020 był dla nas wszystkich szaloną jazdą. Na ten kończący rok sezon wakacyjny, Zespół React ogłosił niedawno ekscytujące badania nad nowym sposobem budowania aplikacji React za pomocą React Server Components.

Proszę pamiętać, że React Server Components jest nadal w fazie rozwoju i nie jest jeszcze zalecany do produkcji. Funkcja jest całkowicie opcjonalna i nadal możesz napisać swój komponent tak, jak robisz to dzisiaj.

Możesz obejrzeć godzinny wykład i demo tutaj, ale tutaj jest 5-minutowy przewodnik, który podkreśla i wyjaśnia ważne kawałki.

Jeśli jesteś ciekawy, w jaki sposób nowe komponenty Reacta odgrywają rolę w przyszłych systemach projektowania, polecam przeczytać:

React Server Component to sposób na napisanie komponentu React, który jest renderowany po stronie serwera w celu poprawy wydajności aplikacji React.

Jednym z problemów napotykanych podczas tworzenia aplikacji z React jest wspólna wysoka liczba żądań sieciowych wykonywanych podczas gdy użytkownicy czekają na stronę / dane, o które prosili, aby stały się dostępne:

Na przykład powszechnym dziś podejściem do pobierania danych jest wywoływanie interfejsów API za pomocą haka useEffect:

useEffect(() => {
axios.get("URL HERE")
.then((response) => {
// set data into state setData(response.data);
})
.catch((error) => {
console.log(error);
});
}, );

Ale chociaż nie ma w tym nic złego, to takie podejście do pobierania danych zawsze będzie kosztowało trochę czasu, aby wyrenderować coś znaczącego dla użytkownika.

Innym problemem jest, oczywiście, rozmiar pakietu. Minifikacja, dzielenie kodu, eliminacja martwego kodu to kilka przykładów metod stosowanych w celu zmniejszenia rozmiaru wiązki aplikacji React. Dlaczego? Ponieważ duży rozmiar bundle’a wymaga czasu na pobranie. Nie każdy ma dostęp do szybkiego urządzenia i szybkiego internetu:

Komponenty serwera React pomogą rozwiązać dwa powyższe problemy i wiele więcej.

Jak działają React Server Components

Ponieważ React Server Components jest wciąż w fazie eksperymentalnej, szczegóły implementacji tej funkcji mogą ulec zmianie. Mimo to, można uchwycić niektóre z jej podstawowych koncepcji, patrząc na demo.

Pierwszą rzeczą jaką należy zauważyć jest to, że w pliku package.json znajduje się kilka pakietów z wersją eksperymentalną:

"react": "0.0.0-experimental-3310209d0",
"react-dom": "0.0.0-experimental-3310209d0",
"react-fetch": "0.0.0-experimental-3310209d0",
"react-fs": "0.0.0-experimental-3310209d0",
"react-pg": "0.0.0-experimental-3310209d0",
"react-server-dom-webpack": "0.0.0-experimental-3310209d0",

Pakiety react , react-dom i react-server-dom-webpack używają wersji eksperymentalnej, która umożliwia działanie komponentu serwera React, podczas gdy react-fetch , react-fs i react-pg to grupa pakietów wrapperów używanych do interakcji z systemem wejścia/wyjścia (Nazywają się one React IO Libraries)

Kolejnym punktem jest to, że to demo jest zasilane przez Express.js, co ma sens, ponieważ potrzebujesz serwera do renderowania komponentów. Ale to również rodzi pytanie: czy to oznacza, że komponenty serwera działają tylko w środowisku JavaScript? Co z Go, Javą i innymi środowiskami server-side?

Możemy zobaczyć wsparcie dla innych środowisk w przyszłości, więc odłóżmy ten punkt na bok na razie.

Oczywiście, wszystkie te szczegóły implementacji mogą się zmienić w przyszłości, wraz z postępem badań.

Przechodząc do kodu wewnątrz folderu src/, można zauważyć trzy rodzaje rozszerzeń dla plików komponentów:

• .server.js rozszerzenie wskazuje na komponenty serwera
• .client.js rozszerzenie wskazuje na komponenty klienta React
• Zwykłe rozszerzenie .js jest przeznaczone dla komponentów współdzielonych. Te komponenty mogą być uruchamiane na serwerze lub kliencie, w zależności od tego, kto je importuje.

Gdy uruchomisz aplikację poleceniem npm start, dwa zadania będą wykonywane jednocześnie:

• Serwer Node uruchomiony przy użyciu skryptu server/api.server.js
• Budowanie Webpacka dla pakietu React po stronie klienta, przy użyciu skryptu scripts/build.js

Patrząc na skrypt serwera, można zauważyć, że app.server.js jest importowany do pliku:

const ReactApp = require('../src/App.server').default;

And later gets processed as Node Writable stream:

const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname, '../build/react-client-manifest.json'),
'utf8'
);
const moduleMap = JSON.parse(manifest);
pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

Kod pod rozszerzeniem .server.js wraz z jego zależnościami nie jest zawarty w pakiecie klienta, co oznacza, że ma zerowy wpływ na rozmiar pakietu.

Komponenty serwera mają bezpośredni dostęp do bazy danych lub systemu plików na serwerze, więc możesz pobrać dowolne dane, których potrzebujesz i wysłać je do klienta przy pierwszym renderowaniu. Możesz zobaczyć przykład w NoteList.server.js pliku:

export default function NoteList({searchText}) {const notes = db.query(
`select * from notes where title ilike  order by id desc`,

).rows;
return notes.length > 0 ? (
<ul className="notes-list">
{notes.map((note) => (
<li key={note.id}>
<SidebarNote note={note} />
</li>
))}
</ul>
) : (
<div className="notes-empty">
{searchText
? `Couldn't find any notes titled "${searchText}".`
: 'No notes created yet!'}{' '}
</div>
);
}

Komponenty serwerowe nie mogą mieć żadnej interaktywności, co oznacza, że nie możesz useState lub tworzyć słuchaczy po stronie serwera. Musisz umieścić stan w swoim client-side i zaimportować je z Server Components.

Jaka jest korzyść z React Server Component?

• Komponenty serwerowe nie są zawarte w pakiecie. Nigdy nie są pobierane przez przeglądarkę, co ma zerowy wpływ na rozmiar pakietu
• Możesz zmniejszyć rozmiar pakietu, przenosząc statyczne, renderowalne komponenty do strony serwera i utrzymując interaktywne komponenty po stronie klienta
• Komponenty serwera mogą uzyskać dostęp do zasobów po stronie serwera. Możesz pobierać dane z bazy danych lub systemu plików bezpośrednio, a także możesz pobierać z API, tak jak po stronie klienta
• Komponenty serwera mogą również odczytywać zapytania GraphQL

Jak to się różni od Server Side Rendering?

SSR jak to działa dzisiaj w aplikacjach React to po prostu wysyłanie komponentów wyrenderowanych jako HTML do klienta, aby Twoja aplikacja wydawała się mieć szybką odpowiedź. Użytkownik nie może nic zrobić z twoją aplikacją, dopóki JavaScript nie zostanie pobrany.

React Server Components jest inny. Jak pokazano w demo, komponenty serwera nie są renderowane jako HTML, ale jako specjalny format, który jest przesyłany strumieniowo do klienta. Strumień ten nie ma na razie standardowego protokołu, ale wygląda bardzo podobnie do formatu JSON. Oto fragment odpowiedzi:

M1:{"id":"./src/SearchField.client.js","chunks":,"name":""}

Gdy SSR jest używany tylko raz do początkowego renderowania, Server Components mogą być re-fetched wiele razy, aby ponownie wyrenderować dane (w przypadku dema, posty markdown).

Wniosek

React Server Components to nowa, ekscytująca funkcja, która może zmienić sposób, w jaki programiści piszą swoje aplikacje React. Umożliwia ona aplikacjom React importowanie pakietów bez wpływu na rozmiar pakietu klienta, tworząc statyczną reprezentację aplikacji, którą można uczynić interaktywną za pomocą komponentów klienta.

Deweloperzy mogą również używać zarówno komponentów serwera, jak i komponentów klienta w ramach jednego drzewa DOM, umożliwiając ponowne pobieranie komponentów serwera bez niszczenia stanu komponentów klienta.

Ale ponieważ ta funkcja jest nadal eksperymentalna, trudno jest określić, w jaki sposób będzie ona naprawdę przydatna w naturze. Dla jednego, ta funkcja może być używana tylko w środowisku serwera Node.js obecnie.

Zespół React jest obecnie skoncentrowany na wprowadzeniu tej funkcji do meta-frameworków takich jak Next.js i Gatbsy, co oznacza, że może minąć trochę czasu (jeśli w ogóle) zanim zobaczymy wsparcie dla innych języków po stronie serwera, takich jak PHP, Python, Go lub Ruby.

Podsumowując, Client-side React nie odchodzi. React po stronie serwera jest opcjonalny.

Podzieliłem się również moimi przemyśleniami na temat Czy powinieneś stworzyć system projektowania dla komponentów serwera React? co może cię zainteresować.

.