React Server Components Rendering Patterns in Next.js

Abstract

This thesis focuses on rendering patterns, React Server Components (RSC), and how React Server Components are rendered in Next.js framework. The literature parts introduce main concepts of web application architecture and the rendering patterns Static Site Generation (SSG), Client-Side Rendering (CSR), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), and Streaming Server-Side Rendering (Streaming SSR) are described.

React version 18 introduced new experimental way of building applications with Server Components that run only on server, with the traditional now named as Client Components that can run on the client. In 2023 Next.js with App Router was the first to implement production-ready version of the React Server Components architecture.

Static Rendering, Dynamic Rendering, and Streaming are server rendering options in Next.js when using React Server Components. Next.js Static Rendering is similar to SSG or ISR, Dynamic Rendering is similar to SSR, Streaming is similar to Streaming SSR. The main difference is that in rendering phase also React Server Component Payload is created. RSC Payload contains rendered Server Components, and props that need to be passed later to the Client Components, and placeholders for Client Components with references to the JavaScript files. The patterns mentioned in the study with Next.js also include RSC Payload creation, even though the pattern might be only referred as SSG, ISR, SSR, or Streaming SSR.

For the case study part, a web application demo was developed using Next.js and React Server Components. Production versions, one with a static home route that uses SSG, and other with a dynamic home route that uses combination of SSR and Streaming SSR, were then tested with Lighthouse performance tests in desktop and mobile emulations. Lighthouse performance tests were chosen to gather information about how rendering performance differ between the static and dynamic route versions.

In performance tests where the initial page load is tested, static route version rendered slightly faster the first content. In overall the dynamic route version performed better in the tests, by executing tasks faster, populating page faster, and painting largest content to screen faster. Test results show that the combination of SSR and Streaming SSR in the dynamic route version produced slightly better performance than the used SSG in the static route version, but the performance differences were quite minimal.

Tämä opinnäytetyö keskittyy renderöintimalleihin, React palvelinkomponentteihin (RSC) ja siihen kuinka React palvelinkomponentit renderöidään Next.js-ohjelmistokehyksessä. Kirjallisuusosissa esitellään verkkosovellusarkkitehtuurin käsitteitä ja renderöintimallit staattisten sivujen generointi (SSG), asiakaspuolen renderöinti (CSR), palvelinpuolen renderöinti (SSR), asteittainen staattisten sivujen generointi (ISR) ja suoratoistettu palvelinpuolen renderöinti (Streaming SSR).

Reactin versio 18 esitteli uuden kokeellisen tavan rakentaa sovelluksia palvelinkomponenteilla, joita ajetaan vain palvelimella, perinteisten asiakaspuolella ajettavien asiakaskomponenttien kanssa. Vuonna 2023 Next.js-ohjelmistokehys otti ensimmäisenä käyttöön tuotantovalmiin version React palvelinkomponentti -arkkitehtuurista.

Staattinen renderöinti, dynaaminen renderöinti ja suoratoisto ovat palvelinpuolen renderöintivaihtoehdot Next.js:ssä käytettäessä React palvelinkomponentteja. Next.js:n staattinen renderöinti on samanlainen kuin SSG tai ISR, dynaaminen renderöinti on samanlainen kuin SSR, suoratoisto on samanlainen kuin Streaming SSR. Suurin ero on, että renderöintivaiheessa luodaan myös RSC-hyötykuorma, joka sisältää renderöidyt palvelinkomponentit, ja myöhemmin asiakaskomponenteille siirrettävät tiedot, sekä asiakaskomponenttien paikkamerkit viittauksilla JavaScript-tiedostoihin. Opinnäytetyössä mainitut mallit Next.js:n yhteydessä sisältävät myös RSC-hyötykuorman luomisen, vaikka mallia kutsuttaisiin nimellä SSG, ISR, SSR tai Streaming SSR.

Tapaustutkimusosuutta varten kehitettiin verkkosovellus käyttämällä Next.js-ohjelmistokehystä ja React palvelinkomponentteja. Sovelluksesta toteutettiin tuotantoversiot, joista toisessa on staattinen kotireitti, joka käyttää SSG:tä, ja toinen versio dynaamisella kotireitillä, joka käyttää SSR:n ja Streaming SSR:n yhdistelmää. Versioita testattiin Lighthouse-suorituskykytesteillä työpöytä- ja mobiiliympäristöjä emuloiden. Suorituskykytesteillä kerättiin tietoa siitä, kuinka renderöinnin suorituskyky eroaa staattisen ja dynaamisen reittiversion välillä.

Sivun alkulatauksen suorituskykytesteissä, staattinen reittiversio hahmotti ensimmäisen sisällön hieman nopeammin. Muuten dynaaminen reittiversio suoriutui testeissä paremmin suorittamalla tehtäviä nopeammin, täyttämällä sivua nopeammin ja maalaamalla suurimman sisällön näytölle nopeammin. Testituloksissa SSR:n ja Streaming SSR:n yhdistelmä dynaamisessa reittiversiossa tuotti hieman paremman suorituskyvyn kuin staattisen reittiversion käyttämä SSG, mutta erot olivat melko vähäisiä.