perf: significantly reduce HTML we send to the client. Up to 4x small…

…er (#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 |
payloadcms · Nov 19, 2024 · 5d2b0b3 · 5d2b0b3
1 parent 1425d58
commit 5d2b0b3
Show file tree

Hide file tree

Showing 25 changed files with 456 additions and 515 deletions.
diff --git a/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.tsx
@@ -75,16 +75,16 @@ export const DocumentTab: React.FC<
           {Pill || Pill_Component ? (
             <Fragment>
               &nbsp;
-              <RenderServerComponent
-                Component={Pill}
-                Fallback={Pill_Component}
-                importMap={payload.importMap}
-                serverProps={{
+              {RenderServerComponent({
+                Component: Pill,
+                Fallback: Pill_Component,
+                importMap: payload.importMap,
+                serverProps: {
                   i18n,
                   payload,
                   permissions,
-                }}
-              />
+                },
+              })}
             </Fragment>
           ) : null}
         </span>

diff --git a/packages/next/src/elements/DocumentHeader/Tabs/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/index.tsx
@@ -80,23 +80,21 @@ export const DocumentTabs: React.FC<{
                 const { path, tab } = CustomView
 
                 if (tab.Component) {
-                  return (
-                    <RenderServerComponent
-                      clientProps={{
-                        path,
-                      }}
-                      Component={tab.Component}
-                      importMap={payload.importMap}
-                      key={`tab-custom-${index}`}
-                      serverProps={{
-                        collectionConfig,
-                        globalConfig,
-                        i18n,
-                        payload,
-                        permissions,
-                      }}
-                    />
-                  )
+                  return RenderServerComponent({
+                    clientProps: {
+                      path,
+                    },
+                    Component: tab.Component,
+                    importMap: payload.importMap,
+                    key: `tab-custom-${index}`,
+                    serverProps: {
+                      collectionConfig,
+                      globalConfig,
+                      i18n,
+                      payload,
+                      permissions,
+                    },
+                  })
                 }
 
                 return (

diff --git a/packages/next/src/elements/Logo/index.tsx b/packages/next/src/elements/Logo/index.tsx
@@ -1,8 +1,8 @@
 import type { ServerProps } from 'payload'
+import type React from 'react'
 
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import { PayloadLogo } from '@payloadcms/ui/shared'
-import React from 'react'
 
 export const Logo: React.FC<ServerProps> = (props) => {
   const { i18n, locale, params, payload, permissions, searchParams, user } = props
@@ -17,20 +17,18 @@ export const Logo: React.FC<ServerProps> = (props) => {
     } = {},
   } = payload.config
 
-  return (
-    <RenderServerComponent
-      Component={CustomLogo}
-      Fallback={PayloadLogo}
-      importMap={payload.importMap}
-      serverProps={{
-        i18n,
-        locale,
-        params,
-        payload,
-        permissions,
-        searchParams,
-        user,
-      }}
-    />
-  )
+  return RenderServerComponent({
+    Component: CustomLogo,
+    Fallback: PayloadLogo,
+    importMap: payload.importMap,
+    serverProps: {
+      i18n,
+      locale,
+      params,
+      payload,
+      permissions,
+      searchParams,
+      user,
+    },
+  })
 }
diff --git a/packages/next/src/elements/Nav/index.tsx b/packages/next/src/elements/Nav/index.tsx
@@ -59,52 +59,52 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
 
   const navPreferences = await getNavPrefs({ payload, user })
 
+  const LogoutComponent = RenderServerComponent({
+    Component: logout?.Button,
+    Fallback: Logout,
+    importMap: payload.importMap,
+    serverProps: {
+      i18n,
+      locale,
+      params,
+      payload,
+      permissions,
+      searchParams,
+      user,
+    },
+  })
+
   return (
     <NavWrapper baseClass={baseClass}>
       <nav className={`${baseClass}__wrap`}>
-        <RenderServerComponent
-          Component={beforeNavLinks}
-          importMap={payload.importMap}
-          serverProps={{
+        {RenderServerComponent({
+          Component: beforeNavLinks,
+          importMap: payload.importMap,
+          serverProps: {
             i18n,
             locale,
             params,
             payload,
             permissions,
             searchParams,
             user,
-          }}
-        />
+          },
+        })}
         <DefaultNavClient groups={groups} navPreferences={navPreferences} />
-        <RenderServerComponent
-          Component={afterNavLinks}
-          importMap={payload.importMap}
-          serverProps={{
+        {RenderServerComponent({
+          Component: afterNavLinks,
+          importMap: payload.importMap,
+          serverProps: {
             i18n,
             locale,
             params,
             payload,
             permissions,
             searchParams,
             user,
-          }}
-        />
-        <div className={`${baseClass}__controls`}>
-          <RenderServerComponent
-            Component={logout?.Button}
-            Fallback={Logout}
-            importMap={payload.importMap}
-            serverProps={{
-              i18n,
-              locale,
-              params,
-              payload,
-              permissions,
-              searchParams,
-              user,
-            }}
-          />
-        </div>
+          },
+        })}
+        <div className={`${baseClass}__controls`}>{LogoutComponent}</div>
       </nav>
       <div className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-content`}>

diff --git a/packages/next/src/layouts/Root/NestProviders.tsx b/packages/next/src/layouts/Root/NestProviders.tsx
@@ -11,20 +11,18 @@ type Args = {
 }
 
 export function NestProviders({ children, importMap, providers }: Args): React.ReactNode {
-  return (
-    <RenderServerComponent
-      clientProps={{
-        children:
-          providers.length > 1 ? (
-            <NestProviders importMap={importMap} providers={providers.slice(1)}>
-              {children}
-            </NestProviders>
-          ) : (
-            children
-          ),
-      }}
-      Component={providers[0]}
-      importMap={importMap}
-    />
-  )
+  return RenderServerComponent({
+    clientProps: {
+      children:
+        providers.length > 1 ? (
+          <NestProviders importMap={importMap} providers={providers.slice(1)}>
+            {children}
+          </NestProviders>
+        ) : (
+          children
+        ),
+    },
+    Component: providers[0],
+    importMap,
+  })
 }
diff --git a/packages/next/src/routes/rest/og/image.tsx b/packages/next/src/routes/rest/og/image.tsx
@@ -20,6 +20,14 @@ export const OGImage: React.FC<{
   leader,
   title,
 }) => {
+  const IconComponent = RenderServerComponent({
+    clientProps: {
+      fill: 'white',
+    },
+    Component: Icon,
+    Fallback,
+    importMap,
+  })
   return (
     <div
       style={{
@@ -95,14 +103,7 @@ export const OGImage: React.FC<{
           width: '38px',
         }}
       >
-        <RenderServerComponent
-          clientProps={{
-            fill: 'white',
-          }}
-          Component={Icon}
-          Fallback={Fallback}
-          importMap={importMap}
-        />
+        {IconComponent}
       </div>
     </div>
   )

diff --git a/packages/next/src/templates/Default/index.tsx b/packages/next/src/templates/Default/index.tsx
@@ -56,13 +56,15 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
         ? viewActions.reduce((acc, action) => {
             if (action) {
               if (typeof action === 'object') {
-                acc[action.path] = (
-                  <RenderServerComponent Component={action} importMap={payload.importMap} />
-                )
+                acc[action.path] = RenderServerComponent({
+                  Component: action,
+                  importMap: payload.importMap,
+                })
               } else {
-                acc[action] = (
-                  <RenderServerComponent Component={action} importMap={payload.importMap} />
-                )
+                acc[action] = RenderServerComponent({
+                  Component: action,
+                  importMap: payload.importMap,
+                })
               }
             }
 
@@ -72,15 +74,32 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
     }
   }, [viewActions, payload])
 
+  const NavComponent = RenderServerComponent({
+    clientProps: { clientProps: { visibleEntities } },
+    Component: CustomNav,
+    Fallback: DefaultNav,
+    importMap: payload.importMap,
+    serverProps: {
+      i18n,
+      locale,
+      params,
+      payload,
+      permissions,
+      searchParams,
+      user,
+      visibleEntities,
+    },
+  })
+
   return (
     <EntityVisibilityProvider visibleEntities={visibleEntities}>
       <BulkUploadProvider>
         <ActionsProvider Actions={Actions}>
-          <RenderServerComponent
-            clientProps={{ clientProps: { visibleEntities } }}
-            Component={CustomHeader}
-            importMap={payload.importMap}
-            serverProps={{
+          {RenderServerComponent({
+            clientProps: { clientProps: { visibleEntities } },
+            Component: CustomHeader,
+            importMap: payload.importMap,
+            serverProps: {
               i18n,
               locale,
               params,
@@ -89,8 +108,8 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
               searchParams,
               user,
               visibleEntities,
-            }}
-          />
+            },
+          })}
           <div style={{ position: 'relative' }}>
             <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
               <div className={`${baseClass}__nav-toggler-container`} id="nav-toggler">
@@ -100,39 +119,24 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
               </div>
             </div>
             <Wrapper baseClass={baseClass} className={className}>
-              <RenderServerComponent
-                clientProps={{ clientProps: { visibleEntities } }}
-                Component={CustomNav}
-                Fallback={DefaultNav}
-                importMap={payload.importMap}
-                serverProps={{
-                  i18n,
-                  locale,
-                  params,
-                  payload,
-                  permissions,
-                  searchParams,
-                  user,
-                  visibleEntities,
-                }}
-              />
+              {NavComponent}
               <div className={`${baseClass}__wrap`}>
                 <AppHeader
                   CustomAvatar={
-                    avatar !== 'gravatar' && avatar !== 'default' ? (
-                      <RenderServerComponent
-                        Component={avatar.Component}
-                        importMap={payload.importMap}
-                      />
-                    ) : undefined
+                    avatar !== 'gravatar' && avatar !== 'default'
+                      ? RenderServerComponent({
+                          Component: avatar.Component,
+                          importMap: payload.importMap,
+                        })
+                      : undefined
                   }
                   CustomIcon={
-                    components?.graphics?.Icon ? (
-                      <RenderServerComponent
-                        Component={components.graphics.Icon}
-                        importMap={payload.importMap}
-                      />
-                    ) : undefined
+                    components?.graphics?.Icon
+                      ? RenderServerComponent({
+                          Component: components.graphics.Icon,
+                          importMap: payload.importMap,
+                        })
+                      : undefined
                   }
                 />
                 {children}