Basic usage

Hydrate should be wrapped around every page on our website and can be adjusted for simple static pages, interactive dynamic pages and everything in between.

Setup

The following example doesn't do much, but it's the starting point from which features can be enabled.

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

function Home() {
  return <h1>Welcome to your page</h1>;
}

export default hydrate(Home);
Copy

The hydrate function in this case did a few things:

• Look up the current page (/en/home for example)
• Automatic 404 if that page was not found
• Provided glossary through useGlossary

Adding sections

The next step is adding sections, this is not required, but allows individual sections later on to have their own data queries.

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

function HeroSection(){
  return <h1>Hero!</h1>;
}

function ImageSection(){
  return <Image />;
}

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

export default hydrate(Home, [HeroSection, ImageSection]);
Copy