Application breaks when returning circular references from getServerSideProps

[samuelcastro]

What version of Next.js are you using?

10.0.3

What version of Node.js are you using?

14.4.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Whenever a circular referenced object is returned from getServerSideProps the application breaks which is clearly not ideal.

I'd recommend the usage of Flatted instead of JSON.stringify | parse to serialized/deserialize objects.

Expected Behavior

Even when returning circular referenced objects the application should not break.

To Reproduce

Just try to return a circular referenced object like on getServerSideProps:

const a = [{one: 1}, {two: '2'}];
a[0].a = a;

This is what Next Right Now is doing to avoid issues, but I think it should be the default behaviour of Next.js. (UnlyEd/next-right-now#270)

Thanks!

[timneutkens]

Usage of JSON.stringify is intended, so not a bug. It'll become even more important with React Server Components.

[Vadorequest]

@timneutkens How do you handle cases where you need circular references?

For instance, when you load some database entities which are linked to each other, creating circular references. Is it a valid approach to serialize them using Flatted, and return them from getServerSideProps and then parse it back in _app (using Flatted).

I don't see any issue with that, as long as it's just one props that is being serialized this way, and not the whole props object. It'd still be JSON.stringify by Next.js as expected by the framework.

[samuelcastro]

@timneutkens Why is it intended and what's the importance for React Server Components?

[samuelcastro]

Hey @timneutkens We'd love your feedback here. :)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.