Dynamic sections

Because of code splitting we don't make all sections available on every page, but we do allow sections to be dynamically added through the CMS.

In the sections array we can also add one object with dynamic sections. Based on the type of these sections CMS data will automatically be provided.

import hydrate from '@dpdk/library/utilities/hydrate';
import ... from ...;

// children in props are the specified sections
function Home({ children }) {
  return (
    <>
      <Menu />
      {children}
      <Footer />
    </>
  );
}

export default hydrate(Home, [
  HeroSection,
  {
    text_section: TextSection,
    video_section: VideoSection
  },
  ImageSection
]);
Copy

Note: The order of sections is important, HeroSection in this case will always be first, then the dynamic sections and then the ImageSection.