1 of 14

Partial Pre-rendering

Hype or Innovation?

Kawtar CHOUBARI

@choubari_

@ React Paris

choubari.com

2 of 14

SSG

Request web page

HTML, CSS, JS

Render to HTML Markup

at build time

CDN

SSR

Request web page

Send HTML, CSS and JS

Render React to HTML Markup

3 of 14

Static Rendering

Dynamic Rendering

4 of 14

5 of 14

Static Rendering

Dynamic Rendering

Servers pre-rendered pages from CDN

Good for less changing content

Faster page loads

Requires a rebuild for updates

Longer build times

Lower server overhead

Renders content for each request

Good for personalized content

Interactive User Experience

Increased server load

Slower page loads

No need to rebuild for updates

Not suitable for dynamic content

Not suitable for static content

Static:

Pre-renders pages at build time. The HTML is generated once and reused for each request. Suitable for blogs, docs, marketing pages, and sites where content changes infrequently.
Faster page load times since markup was generated at build time, no server rendering required to handle each page request.
Content updates require a rebuild, longer build times (to generate HTML markup for each page), not ideal for rapidly changing content

Dynamic:

Renders pages on-demand for each request. The HTML is generated on the server upon each visit. Suitable for dashboards, ecommerce, web apps with frequent content updates.
Real-time data, fresh content at each request
As SSR generates web pages on the server, it requires extra server resources to carry out the rendering process, high server load = slower response times, for each page requested the server processes data and send it back to the client, this strategy is slower for static content

6 of 14

Static Rendering

Dynamic Rendering

Partial Pre-rendering

Combines Static and Dynamic Rendering

on the same page!

(aka Pre-rendering)

7 of 14

Dynamic

Static

8 of 14

9 of 14

Request web page

Serve static shell

static shell at build time

CDN

Dev

Enable the PPR flag and use Suspense for dynamic content

Build

Generate static shell leaving holes for dynamic content

Deploy

Static shell will be served from CDN Edge servers

Request dynamic content

Stream dynamic content

Download CSS, JS

Insert dynamic content in placeholders

How it works: enable the experimental flag in next.config.js, and use <Suspense /> to wrap Dynamic content. At build phase, the server generates static shell for each page of your app, leaving holes for the dynamic content. After deployment, the shell is served from an Edge Network.

The client initiates the request for a web page. CDN / Edge Network responds with static shell of the requested page which include markup and placeholders for dynamic content, along with references to CSS and JS. Browser renders static shell and begins loading CSS & JS. As the JS loads, the browser requests the dynamic content required to fill the placeholders. This request is based on scripts and links embedded in the static shell. Next.js server streams the dynamic content, leveraging React's Concurrent APIs and Suspense for seamless integration. The browser inserts the dynamic content into the placeholders completing the process of rendering the full page. The page is now interactive.

10 of 14

Demo Time!

11 of 14

https://www.partialprerendering.com/

12 of 14

Hype or Innovation?

13 of 14

Hype

Innovation

Still Experimental

Cumulative Layout Shift

Resource Management

Another layer of complexity

Optimized Rendering Strategy

Fast Initial Visual

Default Rendering Model

Great UX and DX

A Next.js thing

Hype:

Not ready for production, CLS: a core web vital measuring visual stability -> webpage might move around as dynamic parts load which can be annoying, will my page / components be statically or dynamically rendered, confusing with extra layer of complexity for building web apps (people still confused about the new app router architecture), A Next.js thing (a rendering model that may not be present in other react frameworks)

Innovation:

Looks promising and will save on resources by loading cached pages that don’t change, web pages will show up faster with the rest of the details filling in smoothly, would be great if it will be the default rendering model for a great DX and less hustles, devs won’t have to learn new APIs to do this, A Next.js thing -> PPR might become the way to build web apps in the future by further developing the model with React team.

14 of 14

Partial Pre-rendering

Hype or Innovation?

Kawtar CHOUBARI

@choubari_

@ React Paris

choubari.com