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:  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 |
19 lines
576 B
TypeScript
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>
|
|
)
|
|
}
|