Render Admin Providers with Server Side Props

[GeorgeHulpoi]

Hello! Currently the CMS renders admin.components.providers with only one prop, the children property. Therefore, it can be helpful when dealing with client-side features, but not with server-side.

I want to propose to render the Providers similar with how other features are rendered (example: admin.components.Field). If it's a server-side component, pass in args the req and payload. It already seems like in RootLayout there is the req, payload and user in

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

Lines 56 to 70 in 59eecc4

	const req = await createLocalReq(
	{
	fallbackLocale: null,
	req: {
	headers,
	host: headers.get('host'),
	i18n,
	url: `${payload.config.serverURL}`,
	} as PayloadRequest,
	},
	payload,
	)
	const { permissions, user } = await payload.auth({ headers, req })
	const clientConfig = await createClientConfig({ config, t: i18n.t })

Therefore in

payload/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx

Lines 71 to 81 in fa3d250

	const NestProviders = ({ children, providers }) => {
	const Component = providers[0]
	if (providers.length > 1) {
	return (
	<Component>
	<NestProviders providers={providers.slice(1)}>{children}</NestProviders>
	</Component>
	)
	}
	return <Component>{children}</Component>
	}

it should be rendered using WithServerSidePropsGeneric. Also, it would be great to have access to the user prop.

Why this approach? Using providers can be very helpful on server-side to create guards, but the current approach forces the developer to make it on client-side. And on the client-side can be a delay between the first-render and the provider execution.