Sitecore Forms in with JSS and Next.js with SSG

Question

Hello Sitecore friends,

I am currently working on a project on Sitecore 10.1 with JSS v19 and nextjs v11. The page is configured to use SSG, so markup is created on build time.

I am trying to integrate Sitecore Forms but have some problems to fully understand, how it should work.

In the documentation it is written, that the form has to be rendered server side (SSR), which makes sense to me, since e.g. the anti forgery token changes with each request.

Also from this page I understand, that even if the whole pages markup is generated statically, I can fetch data dynamically from the server on a component base, which I want to do for my form component.

Now I see two options that are not 100% clear to me, how I can fetch the data from server side: Use GraphQL or use the Layout Service.

GraphQL

Would make sense to me, because I only need the data for one component and could save traffic. But I don't understand, how I would get the same data as from the layout service (again like anti forgery token like on the screenshot below).

Layout Servie

For the layout service it is basically the other way around. I would have the data, that I need but I only see the option, to request data for the whole page again, which seems counterintuitive to me, as it would mean, that the page will be rendered statically and then the data for everything will be fetched again only for the form and even multiple times, if there were multiple forms on one page.

Does anyone have any experience with this scenario and could give me a nudge into the right direction? Have I made any wrong assumptions here?

For now, I would lean to the Layout Service, since I have no idea, how I could get all the data from the GraphQL api.

Cheers, Simon

Answer 1

If you want GraphQL to work for you, you need either a GraphQL extender or a custom Form component.

It will be hard to achieve exactly the same output by GraphQL that you get with Layout Sevice. (You have a specific Contents Resolver for forms, you will need to get exactly the same output).

You will not be able to get Form JSS React component work if you don't exact the same input from GraphQL. If you have different input, you need to write different Form components. It is also will take a lot of effort. These options are possible, but quite hard.

The 2 easy options to use Forms are:

1. Use SSR
2. Turn off the anti-forgery token. Depending on the type of forms that you have, it might be acceptable

Conclusion: All options that your write are achievable. But some are easy, some are complex.