Files
payload/test/admin/components/AfterDashboardClient/index.tsx
Alessio Gravili 5d2b0b30b0 perf: significantly reduce HTML we send to the client. Up to 4x smaller (#9321)
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](https://github.com/user-attachments/assets/edb67d72-f4a5-459b-93f4-68dc65aeffb6)


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 |
2024-11-19 04:30:21 +00:00

19 lines
576 B
TypeScript

import type { CustomComponent, PayloadServerReactComponent } from 'payload'
import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
import React from 'react'
import { Banner } from '../Banner/index.js'
export const AfterDashboardClient: PayloadServerReactComponent<CustomComponent> = ({ payload }) => {
return (
<Banner>
<p>Admin Dependency test component:</p>
{RenderServerComponent({
Component: payload.config.admin.dependencies?.myTestComponent,
importMap: payload.importMap,
})}
</Banner>
)
}