React Server Components

– Det är inte rendering på serversidan.

Jan 6 – 6 min read

Året 2020 har varit en galen resa för oss alla. I samband med årets slutspurt har React-teamet nyligen tillkännagivit spännande forskning om ett nytt sätt att bygga React-appar med React Server Components.

Tänk på att React Server Components fortfarande är under utveckling och att det inte rekommenderas för produktion ännu. Funktionen är helt valfri och du kan fortfarande skriva din komponent som du gör idag.

Du kan se det en timme långa föredraget och demonstrationen här, men här är en 5-minutersguide som lyfter fram och förklarar de viktiga delarna.

Och om du är nyfiken på hur Reacts nya komponenter spelar en roll i framtida designsystem rekommenderar jag att du läser:

React Server Component är ett sätt att skriva React-komponent som renderas på serversidan i syfte att förbättra prestandan för React-appar.

Ett av de problem som uppstår när man utvecklar applikationer med React är det vanliga höga antalet nätverksförfrågningar som görs medan användarna väntar på att sidan/datan de begärt ska bli tillgänglig:

Hämtning av data med useEffect orsakar en fördröjning av meningsfull interaktion

Till exempel är det vanliga tillvägagångssättet för datahämtning idag att ringa API:er med hjälp av useEffect hook:

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

Det är visserligen inget fel med det, men detta tillvägagångssätt för datahämtning kommer alltid att kosta en viss tid för att återge något meningsfullt för användaren.

Det andra problemet är förstås buntstorleken. Minifiering, koduppdelning, eliminering av död kod är några exempel på metoder som används för att minska buntstorleken på React-applikationen. Varför? Därför att en stor paketstorlek tar tid att ladda ner. Alla har inte tillgång till en snabb enhet och snabbt internet:

React Server Components hjälper till att lösa de två ovanstående problemen och mycket mer.

Hur React Server Components fungerar

Om React Server Components fortfarande befinner sig i försöksfasen kan implementeringsdetaljerna för den här funktionen komma att ändras. Trots det kan du ta del av några av dess kärnkoncept genom att titta på demotypen.

Det första du märker är att det finns flera paket med en experimentell version i package.json-filen:

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

react , react-dom och react-server-dom-webpack använder en experimentell version som aktiverar React Server Component, medan react-fetch , react-fs och react-pg är en grupp av omslagspaket som används för att interagera med in- och utdatasystemet (De kallas React IO Libraries)

Nästan är det så att den här demonstrationen drivs av Express.js, vilket är logiskt eftersom du behöver en server för att rendera komponenterna. Men detta väcker också frågan: betyder detta att Server Components endast fungerar i en JavaScript-miljö? Hur är det med Go, Java och andra serverbaserade miljöer?

Det kan hända att vi får stöd för andra miljöer i framtiden, så låt oss lägga denna punkt åt sidan för tillfället.

Självklart kan alla dessa genomförandedetaljer förändras i framtiden, allteftersom forskningen fortskrider.

Om vi går över till koden inuti mappen src/ kan du se tre typer av tillägg för komponentfilerna:

.server.js tillägget indikerar en Server Components
.client.js tillägget indikerar React Client Components
Det vanliga .js tillägget är för delade komponenter. Dessa komponenter kan köras på servern eller klienten, beroende på vem som importerar dem.

När du startar programmet med kommandot npm start kommer två uppgifter att exekveras samtidigt:

Node-servern som körs med hjälp av server/api.server.js-skriptet
Webpack-bygget för React-paketet på klientsidan med hjälp av scripts/build.js-skriptet

Om man tittar på serverskriptet ser man att app.server.js importeras till filen:

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

Och senare behandlas som 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);
}

Koden under .server.jstillägget inklusive dess beroenden ingår inte i klientpaketet, vilket innebär att den har noll effekt på paketets storlek.

Serverkomponenter har direkt tillgång till databasen eller filsystemet på servern, så du kan hämta alla data du behöver och skicka dem till klienten vid den första renderingen. Du kan se exemplet i NoteList.server.js filen:

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 kan inte ha någon interaktivitet, vilket innebär att du inte kan useState eller skapa lyssnare på serversidan. Du måste lägga in tillstånd i din klientsida och importera dem från serverkomponenterna.

React Server Components

– Det är inte rendering på serversidan.

Hur React Server Components fungerar

Vad är fördelen med React Server Component?

Hur skiljer det sig från Server Side Rendering?

Slutsats

Lämna ett svar Avbryt svar