Strapi previews

[sterlinghirsh]

When editing pages in Strapi, our editors have little idea what the page will look like after hitting save. We'd like to have some way to preview changes without affecting what's displayed on the live site. When first creating a page, Strapi offers draft or published status, but that won't help when editing an existing page.

@danielbeardsley 's duplicate record idea --old

• Query param ?preview
• Create duplicate record in Strapi with handle like repair-business-toolkit--old
  • Continue to edit the original record until we're happy with the results.
  • When we're happy with the new record, delete the --old one.
• In GraphQL, always query for both records (handle + handle--old)
  • Display the data from handle--old if it exists.
• When ?preview is specified, display the data from handle (not --old).
• Problems
  • This has the opportunity to leave the old records in place.
  • Always requires 2 queries (or 1 query with an IN, just need to check performance and how it works with relations)

@sterlinghirsh 's duplicate record idea --preview

• Query param ?preview
• Create duplicate record in Strapi with handle like repair-business-toolkit--preview (or maybe repair-business-toolkit--old?)
• When ?preview is specified, add --preview to the requested handle when querying Strapi.
  • i.e. user visits /products/repair-business-toolkit?preview and nextjs queries for repair-business-toolkit--preview
• When we're ready to make the preview live, switch the handle on the old one to --old, then remove the --preview suffix from the new one.
• Problems
  • Possible moment of downtime when swapping handles

@sterlinghirsh 's POST idea

• Add a Preview button in the Strapi edit UI that loads the page in another window
• This will send a POST request that includes all the current unsaved values in the editor
• The page will still do the graphql request, but any posted values override their corresponding values in the query response.
• This doesn't require any duplication of records. Super easy for the editor, but more complicated for devs.
• Problems
  • May not work properly when previewing updated relation fields.

These ideas may not cover previewing sections or related components like banners. We may need a separate preview for banners etc. We could potentially create a strapi plugin that inlines the react component when editing a banner for realtime preview.

Additional features

• Pass a boolean to the frontend to show when there's a preview or not so we can render a link for admins.
• If ?preview is present, allow previewing drafts.

[dhmacs]

A couple of notes for the discussion:

• Next.js Preview Mode: Next.js has a preview mode that is basically a way to handle a preview session
• Strapi Draft & Publish V2: Strapi has planned for 2023 a refactor of the draft and publish feature that should address our needs (not clear exactly when this will land)

[danielbeardsley]

Next.js has a preview mode that is basically a way to handle a preview session

That does look like it would work, but it seems mostly aimed at getting around the statically built pages. It will still work with getServerSideProps but at that point, it's just a way to set a cookie and then be able to read it later in the context object.

I think I prefer a url param because you can add and remove them and it'll only apply for that request and you can have both versions open in separate tabs

Strapi Draft & Publish V2:

This feature looks great. Looks like it won't happen till strapi v5 and we don't know what that will be. Given our current approach to the problem (change the graphQL query from handle eq X to handle IN [X, X-old]) seems pretty lightweight, it'd be easy to replace it with the publish / draft feature when it's available.

[sterlinghirsh]

Great notes, thanks for sharing these. Let's still discuss this tomorrow, but it sounds like we might want to just wait until Strapi implements this.

[sterlinghirsh]

To summarize notes from our discussion today:

• Strapi's duplicate feature is a little lacking, especially around relations.
  • Duplicating a Product page will copy the "banners" section, but the relations to the banners are not duplicated, so it ends up as an empty section.
  • Duplicating a Product List removes the parent and all children.
  • These issues make it hard to use the --old and --preview strategies.
• There is an existing revision history plugin for Strapi, but it's unclear if it will meet our needs. We should still look into it though.
• Strapi v5 is slated to have a more thorough revision history system including the preview system we're talking about, but nobody knows when it will be released.
• We may be able to use a Strapi Plugin to preview the page or specific components (e.g. banners) in real time in the editor, but we're not sure how much visual flexibility these plugins will offer.
• Something like tina.io that allows in-page editing might work here, but that seems like it could be a lot of work.
• Assuming we can figure out a way to make Strapi support previews, Next.js's preview mode might help on the frontend, though it would require changing the caching policy with regard to cookies. We might be just fine with a simple ?preview get param.