Despite rendering much of the same content, admin and the site have different focuses and requirements: admin focuses on frequent data updates; the site focuses on performance, mainly achieved via server rendering. These differing requirements have resulted in different implementations, most notably with the data coming from different sources, admin from Redux, the site from the DB.
As Redux is a purely client-side library, when storing data in Redux you loose the ability to pre-render content on the server and therefore lose many of the performance benefits NextJS has to offer.
In order to suit both needs without losing the performance benefits of server-rendering or bloating the site client bundles with code required for admin functionality, the simplest solution was to create both server and client wrappers for much of the content, eg. home.admin.tsx vs home.site.tsx. These wrappers control where the data is sourced from, Redux or DB, and client wrappers will typically import additional functionality, eg. motion/react for reordering page sections.
Another requirement of admin is that it must source content from different themes with different designs. Therefore, each theme will often has its own set of client components for pages, sections, etc. that can be dynamically sourced in admin. For example, each theme will have it’s own home.admin.tsx that will be sourced in app/admin/(dashboard)/pages/home/page.tsx:
Eg.
const DynamicHomeAdmin = dynamicLoad(
() => import(`#[domain]/${globalConfig.theme}/home.admin`),
{
ssr: false,
}
);