Static data

Hydration of our page is all about providing it with data. The utility was created to support a wide variety of ways you can provide the page and individual sections with data.

Page data

When wrapping your page in hydrate it's automatically provided with some data:

• title, nid, seo, contentType
• sections (if they are specified)

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

function Home({ title, nid, seo, contentType, sections }) {
  return <h1>These properties are directly available</h1>;
}

export default hydrate(Home);
Copy

Let's say you added some custom fields to your page in the CMS, but don't see them appear. You can make them available in a few ways!

For a single page you can add the additionalFields property:

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

function Home({ title, nid, seo, contentType, sections, slug, video }) {
  return <h1>Default properties ánd the additional are available</h1>;
}

Home.additionalFields = `
  slug
  video
`;

export default hydrate(Home);
Copy

Additional fields can also be set conditionally (for example based on contentType):

DynamicPage.additionalFields = ({ contentType }) => {
  if (contentType === 'detail') {
    return 'related';
  }
  return 'blocks';
};
Copy

For all pages at once you can use initAdditionalFields in the root of your application:

// This will add `slug` to all of your pages automatically
initAdditionalFields('slug');
Copy

Section data

For sections, it is slightly different as they all have different data.

Let's say there's a hero section that has the following fields in the CMS:

• title, video, color

Just like with the page those values will be directly mapped to the props

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

function HeroSection({ title, video, color }) {
  return <h1>These properties are directly available</h1>;
}

export default Home;
Copy

Note: You can't specify default properties for sections as they will be too different from each other.