search

payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
28.26k stars 1.75k forks source link

perf: significantly reduce HTML we send to the client. Up to 4x smaller #9321

Closed AlessioGr closed 6 days ago

AlessioGr commented 1 week ago

The biggest difference comes from calling RenderServerComponent as a function, instead of rendering it by using <RenderServerComponent.

This gets rid of wasteful blocks of codes sent to the client that look like this:

CleanShot 2024-11-18 at 20 41 20@2x

HTML size comparison:

Admin test suite

View Before After
Dashboard 331 kB 83 kB
collections/custom-views-one Edit 285 kB 76.6 kB

Fields test suite

View Before After
collections/lexical Edit 189 kB 94.4 kB
collections/lexical List 152 kB 62.9 kB

Community test suite

View Before After
Dashboard 78.9 kB 43.1 kB
github-actions[bot] commented 6 days ago

🚀 This is included in version v3.0.1