Using Serverless plug-in for 11ty previews in Sanity

Does anyone know if the CMS preview works on 11ty using the Serverless plug-in and if so does it work “as you type”? I've seen a few references online where people mention it working but I've yet to find an actual example of how to do this. Trying to decide whether to convert an old Gatsby site to NextJS or 11ty and the instant preview is a requirement.

I've been investigating this myself.• You
can do 11ty previews using Serverless in Sanity. • The most basic version is to just load the serverless page in an iFrame.
• The iFrame can be reloaded manually (clunky); or every time Sanity autosaves new data (better but not great).
• You can't do as you type changes easily as your templates would need away of connecting to the API and updating themselves without a page reload.

Other possible options for getting live updates (as you type) to work:• Run a v2.0 dev server in the cloud and using it's DOM diffing feature to update the page as the API data changes.
• Have code within your (serverless) templates that enable elements on the page to update their own DOM when the data changes. Then use something like
https://www.sanity.io/docs/js-client#listening-to-queries to update that data.

I created a little 11ty demo here which does half of what you need.If you visit

/post-1/

you get the prebuilt page, if you visit

/preview/post-1/

you get the serverless version of the page. The serverless version would update with the latest updates from the API and hence you get a (nearly) live preview. You can use https://www.sanity.io/plugins/iframe-pane to display it in your studio.---
Currently the data in this project is just stubbed out and not fetching from Sanity directly, but I assume you know how to write a GROQ query to fetch it.
---
You have to be careful to translate your GROQ query result in to the format that 11ty expects. For instance returning a list of post from Sanity would likely be in an Array. But for the serverless pagination to work, the posts need to be in an object.

This is all a terrible explanation. Sorry.I should probably write a blog post.

Thanks Darrell. That’s really helpful. Let me know if you end up doing a blog post but this is enough for me to evaluate if it’s going to be good enough for the current admins updating the site.