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 |

packages/richtext-slate/src/field/rscEntry.tsx

@@ -4,7 +4,8 @@ import type {
   Field,
   FieldPaths,
   RichTextFieldClient,
- ServerComponentProps } from 'payload'
+  ServerComponentProps,
+} from 'payload'
 
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import { createClientFields, deepCopyObjectSimple } from 'payload'
@@ -56,31 +57,31 @@ export const RscEntrySlateField: React.FC<
 
       componentMap.set(
         `leaf.button.${leafObject.name}`,
-        <RenderServerComponent
-          clientProps={clientProps}
-          Component={LeafButton}
-          importMap={payload.importMap}
-        />,
+        RenderServerComponent({
+          clientProps,
+          Component: LeafButton,
+          importMap: payload.importMap,
+        }),
       )
 
       componentMap.set(
         `leaf.component.${leafObject.name}`,
-        <RenderServerComponent
-          clientProps={clientProps}
-          Component={LeafComponent}
-          importMap={payload.importMap}
-        />,
+        RenderServerComponent({
+          clientProps,
+          Component: LeafComponent,
+          importMap: payload.importMap,
+        }),
       )
 
       if (Array.isArray(leafObject.plugins)) {
         leafObject.plugins.forEach((Plugin, i) => {
           componentMap.set(
             `leaf.plugin.${leafObject.name}.${i}`,
-            <RenderServerComponent
-              clientProps={clientProps}
-              Component={Plugin}
-              importMap={payload.importMap}
-            />,
+            RenderServerComponent({
+              clientProps,
+              Component: Plugin,
+              importMap: payload.importMap,
+            }),
           )
         })
       }
@@ -102,31 +103,31 @@ export const RscEntrySlateField: React.FC<
       if (ElementButton) {
         componentMap.set(
           `element.button.${element.name}`,
-          <RenderServerComponent
-            clientProps={clientProps}
-            Component={ElementButton}
-            importMap={payload.importMap}
-          />,
+          RenderServerComponent({
+            clientProps,
+            Component: ElementButton,
+            importMap: payload.importMap,
+          }),
         )
       }
       componentMap.set(
         `element.component.${element.name}`,
-        <RenderServerComponent
-          clientProps={clientProps}
-          Component={ElementComponent}
-          importMap={payload.importMap}
-        />,
+        RenderServerComponent({
+          clientProps,
+          Component: ElementComponent,
+          importMap: payload.importMap,
+        }),
       )
 
       if (Array.isArray(element.plugins)) {
         element.plugins.forEach((Plugin, i) => {
           componentMap.set(
             `element.plugin.${element.name}.${i}`,
-            <RenderServerComponent
-              clientProps={clientProps}
-              Component={Plugin}
-              importMap={payload.importMap}
-            />,
+            RenderServerComponent({
+              clientProps,
+              Component: Plugin,
+              importMap: payload.importMap,
+            }),
           )
         })
       }