Hi, Marcel here. I’m a colleague of Mark and Mark has just gone on holiday, so I’ll respond.
I think we have a little communication error here, as we are trying to render the page in Next.js. We need the url’s to the images for that, to work completely. Our website is quite image heavy ( about 80%), as we have to make it attractive for people to play and show the charity work that is being done.
We currently have the components rendering, the text and layout blocks, based on the pageAsJson or the “content object json” shown in the Content Viewer. Unfortunately the image objects in that json only contain the Uuid’s not the url’s.
We want to avoid querying for the images by Uuid, because it would create a rather “chatty” application. The "chatty"ness could possibly be made worse by the multiple images for different screen sizes.
The situation is this. The site gets hit by millions of users, so there might be an impact if we get it wrong. There is also no leeway in the design, as the design is done by a pro design department and a content management team. In short, we have to get it pixel perfect and performing. That’s something that Enonic should be great at, so we are a bit puzzled.
Theoretically, I can think of 3 ways to get a json that can be used to render the site.
1 Write a GraphQL query that joins the components with the image urls. That would be a recursive as images can be in layouts, parts in layouts etc.
2 Change the GraphQL schema to automaticly do the join with the image url
3 Change the Enonic image components to have the url, but that would probably create caching problems.
We have used the GitHub - navikt/nav-enonicxp-frontend as an inspiration. Their Image component has an image url, but we suspect they did some magic on the Enonic back-end. We are sure willing to do that too, but need a little pointer in the right direction.
Edit: On further research I see that the Content View json and the pageAsJson are not exactly the same. Both are also missing the __typename property available in the GraphQL api and used to determine the layout in the nav app. These 3 things look similar, but are different.