Ideas
Give us your best ideas!
Give us your best ideas!
Give us your best ideas!
The new Page Editing preview feature is cool, but looking into the frontend implementation of it i wondered why the draftMode feature of Next.js is not being used.
Draft mode is a feature in Next which is specifically for CMS previewers, for example Sanity uses this with Next.js to preview content. The React Accelerator however uses page revalidation somewhat incorrectly, as that is mostly for purging caches relating to the page. However using draft mode would be more in line with Next.js best practices.
https://nextjs.org/docs/app/building-your-application/configuring/draft-mode
Christian Norrman
Sorry for the late reply, draft mode effectively makes sure that the user sees fresh data and no stale cache or anything gets in the way, Litium gets by this by having unique guids for the URL, but this is really not that secure. In Next 16 they hade added more caching capabilities with sliding caches which might make previews see data which is cached. Which is not good for previews.
Also draft mode gets a good way to identify if the page is being rendered in the preview mode. Today weh ave to check the url if it starts with ! which is a bit of a hack. In order to display certain error messages for the editor to fix. (for example if a product block crashes because the graphql query fails due to invalid product permissions or anything like that).
In Next.js draftMode purges each cache and comes with other sorts of features (such as being able to detect if we are in a draft mode or not). While Litium uses GraphQL the fetch does not by default cache any data. But a partner could add its own cache tags which requires special revalidation.
Draft mode also helps with these cases by globally disabling the cache within Next.js. Draft Mode also saves resources in Next.js as it doesn't need to unnecessarily cache data. A bit of an optimization but Next.js draft mode should always be used in scenarios when we are not showing a publically facing page which is not idempotent.
Thank you for your suggestion. However, I would like to know what benefit would the Draft mode bring, when all pages in React accelerator are dynamic rendered?
The reason why we use revalidation is because, we want to purge the page's cache, and ask NextJs to re-render the page, as new data is available.