Add rehydrate hook to pages to enable rich data models in page props

[sandcastle]

Feature request

Is your feature request related to a problem?

Currently, when using getStaticProps it's not possible to use common JS objects like Date or other objects that correctly serialize to JSON using a toJson method. This forces client-side models to be anemic.

Describe the solution you'd like

As far as I understand it, the problem is with rehydration on the client. If an optional hook into the rehydration process on the client was added, then you could overcome this issue. For cases where it is not required, no extra work is needed. But for cases such as ours where we have a rich domain model and are using classes, we would get the full benefit of the domain model.

An example of how this could work would be to add something like rehydrateProps that allows you to control the rehydration process:

class MyClass {
  // ...
  constructor(props: any = {}) {
    // magic here
  }
}

const MyPage = () => {
  // ...
}

export const getStaticProps = async () => {
  // ...
  const myClass = new MyClass(); // rich data model
  return {
    props: { myClass }
  };
};

// optional hook that restores a rich data model on the client
export const rehydrateProps = (json: any) => {
  return { 
    myClass: new MyClass(json.myClass)
  };
};

export default MyPage;

Describe alternatives you've considered

The current alternatives are not great and just feel like hacks:

1. Don't use classes, Date's or other objects
2. Use basic props that comply with the current requirements and then convert to classes / richer models inside of the page and use local state in the page to manage this, when the props change, re-instantiate objects

Additional context

• toJson serialization
• Related discussion on serialization - isSerializable does not include Date type #11498

/CC @Timer / @timneutkens / @AshConnolly / @thebillkidy

[richardthombs]

fwiw, I have found this solution, which presumably uses babel to patch the hydration process to use superjson.

https://github.com/blitz-js/babel-plugin-superjson-next

[jokull]

SvelteKit does exactly this - it uses this library: https://github.com/Rich-Harris/devalue