perf: faster page navigation by speeding up createClientConfig, speed up version fetching, speed up lexical init. Up to 100x faster (#9457)

If you had a lot of fields and collections, createClientConfig would be
extremely slow, as it was copying a lot of memory. In my test config
with a lot of fields and collections, it took 4 seconds(!!).

And not only that, it also ran between every single page navigation.

This PR significantly speeds up the createClientConfig function. In my
test config, its execution speed went from 4 seconds to 50 ms.
Additionally, createClientConfig is now properly cached in both dev &
prod. It no longer runs between every single page navigation. Even if
you trigger a full page reload, createClientConfig will be cached and
not run again. Despite that, HMR remains fully-functional.

This will make payload feel noticeably faster for large configs -
especially if it contains a lot of richtext fields, as it was previously
deep-copying the relatively large richText editor configs over and over
again.

## Before - 40 sec navigation speed

https://github.com/user-attachments/assets/fe6b707a-459b-44c6-982a-b277f6cbb73f

## After - 1 sec navigation speed

https://github.com/user-attachments/assets/384fba63-dc32-4396-b3c2-0353fcac6639

## Todo

- [x] Implement ClientSchemaMap and cache it, to remove
createClientField call in our form state endpoint
- [x] Enable schemaMap caching for dev
- [x] Cache lexical clientField generation, or add it to the parent
clientConfig

## Lexical changes

Red: old / removed
Green: new

![CleanShot 2024-11-22 at 21 07
41@2x](https://github.com/user-attachments/assets/f8321218-763c-4120-9353-076c381f33fb)

### Speed up version queries

This PR comes with performance optimizations for fetching versions
before a document is loaded. Not only does it use the new select API to
limit the fields it queries, it also completely skips a database query
if the current document is published.

### Speed up lexical init

Removes a bunch of unnecessary deep copying of lexical objects which
caused higher memory usage and slower load times. Additionally, the
lexical default config sanitization now happens less often.

Author: AlessioGr

.github/workflows/main.yml

@@ -296,6 +296,7 @@ jobs:
           - admin__e2e__3
           - admin-root
           - auth
+          - auth-basic
           - field-error-states
           - fields-relationship
           - fields

packages/next/src/layouts/Root/checkDependencies.ts

@@ -17,7 +17,7 @@ const customReactVersionParser: CustomVersionParser = (version) => {
 
 let checkedDependencies = false
 
-export const checkDependencies = async () => {
+export const checkDependencies = () => {
   if (
     process.env.NODE_ENV !== 'production' &&
     process.env.PAYLOAD_DISABLE_DEPENDENCY_CHECKER !== 'true' &&
@@ -26,7 +26,7 @@ export const checkDependencies = async () => {
     checkedDependencies = true
 
     // First check if there are mismatching dependency versions of next / react packages
-    await payloadCheckDependencies({
+    void payloadCheckDependencies({
       dependencyGroups: [
         {
           name: 'react',

packages/next/src/layouts/Root/index.tsx

@@ -3,12 +3,12 @@ import type { ImportMap, SanitizedConfig, ServerFunctionClient } from 'payload'
 
 import { rtlLanguages } from '@payloadcms/translations'
 import { RootProvider } from '@payloadcms/ui'
+import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig'
 import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
 import { getPayload, parseCookies } from 'payload'
 import React from 'react'
 
 import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js'
-import { getClientConfig } from '../../utilities/getClientConfig.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
 import { getRequestTheme } from '../../utilities/getRequestTheme.js'
 import { initReq } from '../../utilities/initReq.js'
@@ -33,7 +33,7 @@ export const RootLayout = async ({
   readonly importMap: ImportMap
   readonly serverFunction: ServerFunctionClient
 }) => {
-  await checkDependencies()
+  checkDependencies()
 
   const config = await configPromise
 
@@ -54,7 +54,7 @@ export const RootLayout = async ({
 
   const payload = await getPayload({ config, importMap })
 
-  const { i18n, permissions, req, user } = await initReq(config)
+  const { i18n, permissions, user } = await initReq(config)
 
   const dir = (rtlLanguages as unknown as AcceptedLanguages[]).includes(languageCode)
     ? 'RTL'
@@ -86,7 +86,7 @@ export const RootLayout = async ({
 
   const navPrefs = await getNavPrefs({ payload, user })
 
-  const clientConfig = await getClientConfig({
+  const clientConfig = getClientConfig({
     config,
     i18n,
     importMap,

packages/next/src/utilities/getClientConfig.ts

@@ -102,6 +102,7 @@ export const Account: React.FC<AdminViewProps> = async ({
       await getVersions({
         id: user.id,
         collectionConfig,
+        doc: data,
         docPermissions,
         locale: locale?.code,
         payload,

packages/next/src/views/Account/index.tsx

@@ -10,6 +10,13 @@ import { sanitizeID } from '@payloadcms/ui/shared'
 
 type Args = {
   collectionConfig?: SanitizedCollectionConfig
+  /**
+   * Optional - performance optimization.
+   * If a document has been fetched before fetching versions, pass it here.
+   * If this document is set to published, we can skip the query to find out if a published document exists,
+   * as the passed in document is proof of its existence.
+   */
+  doc?: Record<string, any>
   docPermissions: SanitizedDocumentPermissions
   globalConfig?: SanitizedGlobalConfig
   id?: number | string
@@ -27,17 +34,19 @@ type Result = Promise<{
 
 // TODO: in the future, we can parallelize some of these queries
 // this will speed up the API by ~30-100ms or so
+// Note from the future: I have attempted parallelizing these queries, but it made this function almost 2x slower.
 export const getVersions = async ({
   id: idArg,
   collectionConfig,
+  doc,
   docPermissions,
   globalConfig,
   locale,
   payload,
   user,
 }: Args): Result => {
   const id = sanitizeID(idArg)
-  let publishedQuery
+  let publishedDoc
   let hasPublishedDoc = false
   let mostRecentVersionIsAutosaved = false
   let unpublishedVersionCount = 0
@@ -70,37 +79,49 @@ export const getVersions = async ({
     }
 
     if (versionsConfig?.drafts) {
-      publishedQuery = await payload.find({
-        collection: collectionConfig.slug,
-        depth: 0,
-        locale: locale || undefined,
-        user,
-        where: {
-          and: [
-            {
-              or: [
+      // Find out if a published document exists
+      if (doc?._status === 'published') {
+        publishedDoc = doc
+      } else {
+        publishedDoc = (
+          await payload.find({
+            collection: collectionConfig.slug,
+            depth: 0,
+            limit: 1,
+            locale: locale || undefined,
+            pagination: false,
+            select: {
+              updatedAt: true,
+            },
+            user,
+            where: {
+              and: [
                 {
-                  _status: {
-                    equals: 'published',
-                  },
+                  or: [
+                    {
+                      _status: {
+                        equals: 'published',
+                      },
+                    },
+                    {
+                      _status: {
+                        exists: false,
+                      },
+                    },
+                  ],
                 },
                 {
-                  _status: {
-                    exists: false,
+                  id: {
+                    equals: id,
                   },
                 },
               ],
             },
-            {
-              id: {
-                equals: id,
-              },
-            },
-          ],
-        },
-      })
+          })
+        )?.docs?.[0]
+      }
 
-      if (publishedQuery.docs?.[0]) {
+      if (publishedDoc) {
         hasPublishedDoc = true
       }
 
@@ -109,6 +130,9 @@ export const getVersions = async ({
           collection: collectionConfig.slug,
           depth: 0,
           limit: 1,
+          select: {
+            autosave: true,
+          },
           user,
           where: {
             and: [
@@ -130,7 +154,7 @@ export const getVersions = async ({
         }
       }
 
-      if (publishedQuery.docs?.[0]?.updatedAt) {
+      if (publishedDoc?.updatedAt) {
         ;({ totalDocs: unpublishedVersionCount } = await payload.countVersions({
           collection: collectionConfig.slug,
           user,
@@ -148,7 +172,7 @@ export const getVersions = async ({
               },
               {
                 updatedAt: {
-                  greater_than: publishedQuery.docs[0].updatedAt,
+                  greater_than: publishedDoc.updatedAt,
                 },
               },
             ],
@@ -159,6 +183,7 @@ export const getVersions = async ({
 
     ;({ totalDocs: versionCount } = await payload.countVersions({
       collection: collectionConfig.slug,
+      depth: 0,
       user,
       where: {
         and: [
@@ -173,15 +198,23 @@ export const getVersions = async ({
   }
 
   if (globalConfig) {
+    // Find out if a published document exists
     if (versionsConfig?.drafts) {
-      publishedQuery = await payload.findGlobal({
-        slug: globalConfig.slug,
-        depth: 0,
-        locale,
-        user,
-      })
-
-      if (publishedQuery?._status === 'published') {
+      if (doc?._status === 'published') {
+        publishedDoc = doc
+      } else {
+        publishedDoc = await payload.findGlobal({
+          slug: globalConfig.slug,
+          depth: 0,
+          locale,
+          select: {
+            updatedAt: true,
+          },
+          user,
+        })
+      }
+
+      if (publishedDoc?._status === 'published') {
         hasPublishedDoc = true
       }
 
@@ -204,7 +237,7 @@ export const getVersions = async ({
         }
       }
 
-      if (publishedQuery?.updatedAt) {
+      if (publishedDoc?.updatedAt) {
         ;({ totalDocs: unpublishedVersionCount } = await payload.countGlobalVersions({
           depth: 0,
           global: globalConfig.slug,
@@ -218,7 +251,7 @@ export const getVersions = async ({
               },
               {
                 updatedAt: {
-                  greater_than: publishedQuery.updatedAt,
+                  greater_than: publishedDoc.updatedAt,
                 },
               },
             ],

packages/next/src/views/Document/getVersions.ts

@@ -1,46 +1,11 @@
-import type { I18nClient } from '@payloadcms/translations'
-import type {
-  ClientConfig,
-  Data,
-  DocumentPreferences,
-  FormState,
-  ImportMap,
-  PayloadRequest,
-  SanitizedConfig,
-  VisibleEntities,
-} from 'payload'
+import type { Data, DocumentPreferences, FormState, PayloadRequest, VisibleEntities } from 'payload'
 
+import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig'
 import { headers as getHeaders } from 'next/headers.js'
-import { createClientConfig, getAccessResults, isEntityHidden, parseCookies } from 'payload'
+import { getAccessResults, isEntityHidden, parseCookies } from 'payload'
 
 import { renderDocument } from './index.js'
 
-let cachedClientConfig = global._payload_clientConfig
-
-if (!cachedClientConfig) {
-  cachedClientConfig = global._payload_clientConfig = null
-}
-
-export const getClientConfig = (args: {
-  config: SanitizedConfig
-  i18n: I18nClient
-  importMap: ImportMap
-}): ClientConfig => {
-  const { config, i18n, importMap } = args
-
-  if (cachedClientConfig && process.env.NODE_ENV !== 'development') {
-    return cachedClientConfig
-  }
-
-  cachedClientConfig = createClientConfig({
-    config,
-    i18n,
-    importMap,
-  })
-
-  return cachedClientConfig
-}
-
 type RenderDocumentResult = {
   data: any
   Document: React.ReactNode

packages/next/src/views/Document/handleServerFunction.tsx

@@ -1,10 +1,4 @@
-import type {
-  AdminViewProps,
-  Data,
-  PayloadComponent,
-  ServerProps,
-  ServerSideEditViewProps,
-} from 'payload'
+import type { AdminViewProps, Data, PayloadComponent, ServerSideEditViewProps } from 'payload'
 
 import { DocumentInfoProvider, EditDepthProvider, HydrateAuthProvider } from '@payloadcms/ui'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
@@ -137,6 +131,7 @@ export const renderDocument = async ({
     getVersions({
       id: idFromArgs,
       collectionConfig,
+      doc,
       docPermissions,
       globalConfig,
       locale: locale?.code,