React Server Components

Het jaar 2020 is voor ons allemaal een dolle boel geweest. Voor deze eindejaarsvakantie heeft het React Team onlangs opwindend onderzoek aangekondigd naar een nieuwe manier om React-apps te bouwen met React Server Components.

Bedenk wel dat React Server Components nog in ontwikkeling is en nog niet wordt aanbevolen voor productie. De functie is volledig optioneel en je kunt je component nog steeds schrijven zoals je vandaag doet.

Je kunt de lezing van een uur en de demo hier bekijken, maar hier is een gids van 5 minuten die de belangrijke stukjes benadrukt en uitlegt.

Ook, als je nieuwsgierig bent naar hoe de nieuwe componenten van React een rol spelen in toekomstige ontwerpsystemen, raad ik je aan om te lezen:

React Server Component is een manier om React-component te schrijven die wordt gerenderd in de server-side met het doel om de prestaties van React-apps te verbeteren.

Een van de problemen die zich voordoen bij het ontwikkelen van toepassingen met React is het gemeenschappelijke hoge aantal netwerkverzoeken dat wordt gedaan terwijl gebruikers wachten tot de pagina / gegevens die ze hebben opgevraagd, beschikbaar komen:

Zo is de gangbare aanpak voor het ophalen van gegevens tegenwoordig het aanroepen van API’s met behulp van de useEffect-haak:

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

Hoewel daar niets mis mee is, zal deze benadering van data fetching altijd enige tijd kosten om iets zinvols voor de gebruiker te renderen.

Het andere probleem is, natuurlijk, de bundel grootte. Minification, code splitting, dead code elimination zijn een paar voorbeelden van methoden die gebruikt worden om de bundelgrootte van React applicatie te verkleinen. Waarom? Omdat een grote bundelgrootte tijd kost om te downloaden. Niet iedereen heeft toegang tot een snel apparaat en snel internet:

React Server Components zal helpen de twee bovenstaande problemen op te lossen en nog veel meer.

Hoe React Server Components werken

Omdat React Server Components zich nog in de experimentele fase bevindt, kunnen de implementatiedetails van deze functie nog veranderen. Desondanks kunt u een aantal van de kernconcepten vastleggen door naar de demo te kijken.

Het eerste wat opvalt is dat er verschillende pakketten met een experimentele versie in het package.json bestand staan:

"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",

De react , react-dom en react-server-dom-webpack maakt gebruik van een experimentele versie die React Server Component mogelijk maakt, terwijl react-fetch , react-fs en react-pg is een groep wrapper pakketten die worden gebruikt voor de interactie met de input / output systeem (Ze worden React IO Libraries genoemd)

Het volgende punt is dat deze demo wordt aangedreven door Express.js, wat logisch is omdat je een server nodig hebt om de componenten te renderen. Maar dit roept ook de vraag op: betekent dit dat Server Components alleen werken in een JavaScript-omgeving? Hoe zit het met Go, Java, en andere server-side omgevingen?

Wij kunnen ondersteuning voor andere omgevingen in de toekomst zien, dus laten we dit punt voor nu opzij zetten.

Natuurlijk kunnen al deze implementatiedetails in de toekomst veranderen, als het onderzoek vordert.

Verplaatsend naar de code in de src/ map, ziet u drie soorten extensies voor de component bestanden:

• .server.js extensie geeft een Server Components
• .client.js extensie geeft React Client Components
• De normale .js extensie is voor gedeelde componenten. Deze componenten kunnen op de server of de client worden uitgevoerd, afhankelijk van wie ze importeert.

Wanneer u de applicatie start met npm start commando, zullen twee taken gelijktijdig worden uitgevoerd:

• De Node server die draait met behulp van het server/api.server.js script
• De Webpack build voor de client-side React bundel, met behulp van het scripts/build.js script

Kijkend naar het server script, kunt u zien dat de app.server.js wordt geïmporteerd in het bestand:

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

En later wordt verwerkt als 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);
}

De code onder .server.js extensie inclusief zijn afhankelijkheden wordt niet opgenomen in de client bundel, wat betekent dat het nul effect heeft op de bundel grootte.

Server-componenten hebben directe toegang tot de database of het bestandssysteem op de server, zodat u alle gegevens kunt ophalen die u nodig hebt en deze naar de client sturen bij de eerste render. U kunt het voorbeeld zien in NoteList.server.js file:

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>
);
}

Server Components kunnen geen interactiviteit hebben, wat betekent dat u geen useState of luisteraars kunt maken aan de server-kant. Je moet state in je client-side stoppen en deze importeren uit de Server Components.

Wat is het voordeel van React Server Component?

• Servercomponenten worden niet in de bundel opgenomen. Ze worden nooit door de browser gedownload en hebben geen effect op de bundelgrootte
• U kunt de bundelgrootte verkleinen door statische, render-only componenten naar de server-side te verplaatsen en de interactieve-stateful componenten aan de client-side te houden
• Servercomponenten hebben toegang tot server-side resources. Je kunt gegevens direct uit de database of het bestandssysteem halen, en je kunt ook uit API’s halen, net als aan de client-kant
• Server-componenten kunnen ook GraphQL queries lezen

Hoe is dat anders dan Server Side Rendering?

SSR zoals het vandaag de dag werkt in React applicaties is simpelweg het sturen van componenten die als HTML zijn gerenderd naar de client, zodat je app een snelle respons lijkt te hebben. De gebruiker kan niets doen met uw app totdat de JavaScript is gedownload.

React Server Components is anders. Zoals in de demo te zien is, worden Server Components niet gerenderd als HTML, maar als een speciaal formaat dat naar de client wordt gestreamd. De stream heeft vooralsnog geen standaard protocol, maar het lijkt veel op JSON formaat. Hier is een stukje van de respons:

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

Waar SSR slechts eenmaal wordt gebruikt voor de initiële rendering, kunnen Server Components meerdere keren worden ge-fetched om de gegevens opnieuw te renderen (in het geval van de demo, de markdown-posts).

Conclusie

React Server Components is een nieuwe opwindende functie die de manier kan veranderen waarop ontwikkelaars hun React-applicatie schrijven. Het stelt React-toepassingen in staat om pakketten te importeren zonder de bundelgrootte van de client te beïnvloeden, waardoor een statische weergave van de toepassing wordt gecreëerd die interactief kan worden gemaakt door Client Components te gebruiken.

Ontwikkelaars kunnen ook zowel Server Components als Client Components onder een enkele DOM-boom gebruiken, waardoor u servercomponenten opnieuw kunt ophalen zonder de clientcomponentenstatus te vernietigen.

Maar omdat deze functie nog steeds experimenteel is, is het moeilijk om te bepalen hoe deze echt nuttig zal zijn in het wild. Voor een, deze functie kan alleen worden gebruikt onder de Node.js server omgeving op dit moment.

Het React-team is momenteel gericht op het brengen van deze functie in meta-frameworks zoals Next.js en Gatbsy, wat betekent dat het kan enige tijd duren (als ooit) voordat we ondersteuning zien voor andere server-side talen zoals PHP, Python, Go, of Ruby.

Om samen te vatten, Client-side React is niet weg te gaan. Server-side React is optioneel.

Ook heb ik mijn gedachten gedeeld over Moet je een ontwerpsysteem maken voor React Server Components? wat je misschien interesseert.