React Server Components

– Es ist nicht das serverseitige Rendering.

Jan 6 – 6 min read

Das Jahr 2020 war eine verrückte Fahrt für uns alle. Zum Jahresende hat das React Team vor kurzem spannende Forschungen zu einer neuen Art und Weise angekündigt, React-Apps mit React Server Components zu erstellen.

Bitte bedenken Sie, dass React Server Components noch in der Entwicklung ist und noch nicht für die Produktion empfohlen wird. Das Feature ist völlig optional und Sie können Ihre Komponente immer noch so schreiben, wie Sie es heute tun.

Sie können sich den einstündigen Vortrag und die Demo hier ansehen, aber hier ist ein 5-minütiger Leitfaden, der die wichtigsten Punkte hervorhebt und erklärt.

Wenn Sie außerdem neugierig darauf sind, wie die neuen Komponenten von React in zukünftigen Designsystemen eine Rolle spielen, empfehle ich Ihnen folgende Lektüre:

React Server Component ist eine Möglichkeit, React-Komponenten zu schreiben, die serverseitig gerendert werden, um die Leistung von React-Anwendungen zu verbessern.

Eines der Probleme, mit denen man bei der Entwicklung von Anwendungen mit React konfrontiert wird, ist die übliche hohe Anzahl von Netzwerkanfragen, während die Benutzer darauf warten, dass die von ihnen angeforderten Seiten/Daten verfügbar werden:

Das Abrufen von Daten mit useEffect führt zu einer Verzögerung sinnvoller Interaktion

Der heute übliche Ansatz zum Abrufen von Daten ist beispielsweise der Aufruf von APIs über den useEffect Hook:

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

Auch wenn daran nichts auszusetzen ist, kostet dieser Datenabruf immer etwas Zeit, um etwas Sinnvolles für den Benutzer zu erstellen.

Das andere Problem ist natürlich die Größe der Pakete. Minification, Code-Splitting, Eliminierung von totem Code sind einige Beispiele für Methoden, die verwendet werden, um die Bundle-Größe von React-Anwendungen zu reduzieren. Und warum? Weil eine große Paketgröße Zeit zum Herunterladen benötigt. Nicht jeder hat Zugang zu einem schnellen Gerät und schnellem Internet:

React-Server-Komponenten helfen dabei, die beiden oben genannten Probleme zu lösen und vieles mehr.

Wie React Server Components funktionieren

Da sich React Server Components noch in der experimentellen Phase befindet, können sich die Implementierungsdetails dieses Features noch ändern. Dennoch können Sie sich einige der Kernkonzepte aneignen, indem Sie sich die Demo ansehen.

Das erste, was auffällt, ist, dass es mehrere Pakete mit einer experimentellen Version in der package.json-Datei gibt:

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

Die react , react-dom und react-server-dom-webpack verwenden eine experimentelle Version, die die React Server Component ermöglicht, während react-fetch , react-fs und react-pg eine Gruppe von Wrapper-Paketen sind, die für die Interaktion mit dem Input/Output-System verwendet werden (Sie werden React IO Libraries genannt)

Der nächste Punkt ist, dass diese Demo von Express.js betrieben wird, was Sinn macht, weil man einen Server braucht, um die Komponenten zu rendern. Aber das wirft auch die Frage auf: Bedeutet das, dass Server-Komponenten nur in einer JavaScript-Umgebung funktionieren? Was ist mit Go, Java und anderen serverseitigen Umgebungen?

Möglicherweise werden wir in Zukunft Unterstützung für andere Umgebungen sehen, also lassen wir diesen Punkt erst einmal beiseite.

Natürlich können sich all diese Implementierungsdetails in Zukunft ändern, wenn die Forschung voranschreitet.

Wenn man sich den Code im Ordner src/ ansieht, kann man drei Arten von Erweiterungen für die Komponentendateien erkennen:

.server.js Die Erweiterung weist auf Server-Komponenten hin
.client.js Die Erweiterung weist auf React-Client-Komponenten hin
Die reguläre .js Erweiterung ist für gemeinsame Komponenten. Diese Komponenten können auf dem Server oder dem Client ausgeführt werden, je nachdem, wer sie importiert.

Wenn Sie die Anwendung mit dem Befehl npm start starten, werden zwei Aufgaben gleichzeitig ausgeführt:

Der Node-Server, der mit dem Skript server/api.server.js ausgeführt wird
Der Webpack-Build für das clientseitige React-Bundle, der mit dem Skript scripts/build.js ausgeführt wird

Bei einem Blick auf das Server-Skript können Sie sehen, dass app.server.js in die Datei importiert wird:

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

Und später als Node Writable Stream verarbeitet wird:

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

Der Code unter der .server.js-Erweiterung einschließlich seiner Abhängigkeiten ist nicht im Client-Bundle enthalten, was bedeutet, dass er keinen Einfluss auf die Bundle-Größe hat.

Server-Komponenten haben direkten Zugriff auf die Datenbank oder das Dateisystem auf dem Server, so dass Sie alle Daten, die Sie benötigen, abholen und beim ersten Rendering an den Client senden können. Sie können das Beispiel in der NoteList.server.js Datei sehen:

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 Komponenten können keine Interaktivität haben, was bedeutet, dass Sie keine useState oder Listener auf der Server-Seite erstellen können. Man muss Zustände auf der Client-Seite setzen und sie von den Server-Komponenten importieren.

React Server Components

– Es ist nicht das serverseitige Rendering.

Wie React Server Components funktionieren

Was ist der Vorteil von React Server Component?

Wie unterscheidet sich das vom Server Side Rendering?

Fazit

Schreibe einen Kommentar Antworten abbrechen