next-sanity
next-sanity copied to clipboard
sanity-io
feat: new preview mode
Goals:
- Solve token issues in an elegant way, so Safari users get Preview Mode without hurting perf for Chrome.
- Don't increase page load JS when preview mode is off.
- Support React 18 time-slicing.
How to test
npm i next-sanity@new-preview-mode
React 17 example
React 18 example
WIP
Status
- Works on React 18 with Time Slicing
- Supports Safari tokens with lazy load of preview mode code.
Challenges
- Parcel doesn't play nice with
React.lazyin library code, we may need to switch to Esbuild or Vite. - Moving away from
useSubscriptionto<PreviewMode />favors optimal load perf and bundlesize over code simplicity, find better helpers and base setups that are less verbose/boilerplate-y. - We have 3 different "Preview Modes", the one in our current docs is the cookie/authenticated one that doesn't need a token, but also doesn't work outside Chrome. We need better docs that explains this and guide people into the pit of success.
- SSR, drafts and hydration is tricky, need better documentation on that as well (it's a hard problem).
- Need good debugging tools/devtools.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated |
|---|---|---|---|
| next-sanity | ✅ Ready (Inspect) | Visit Preview | Aug 12, 2022 at 4:07PM (UTC) |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
📝 Changed routes:
| …kie-only/[[...studio]] | …ken-only/[[...studio]] |
|---|---|
![Screenshot of /fixtures/preview-cookie-only/[[...studio]]](https://images.weserv.nl?url=https://sjc.microlink.io/xwQqn__vBaZMP8n2K5S_t4soo3vDcL2f8Im75YDsZ0Lh5r3WDZ1MkzEBCLqxSkoQY7-9GXERufl91Hrir5GDjQ.png&w=600) (view full size) |
![Screenshot of /fixtures/preview-token-only/[[...studio]]](https://images.weserv.nl?url=https://sjc.microlink.io/-LI596xfE09MxBXbfb5IM7KP06Nr_ZnfM0q3KX1tWP75BOWHGoiSV74Q2OQgs5ql4bwvLcWW_wppHXSmIUmutA.png&w=600) (view full size) |
| / | /studio/[[...index]] |
|---|---|
 (view full size) |
![Screenshot of /studio/[[...index]]](https://images.weserv.nl?url=https://sjc.microlink.io/modJ-x8SyRyuG1wArDNIenKRTb8LFjA2vFYOEQG3okmEh-pizsQNnXDYYCMrIOjBPfk1UIrLHyvqNx2Nm83HQQ.png&w=600) (view full size) |
And 4 other routes:
Commit 9d7dacfbeccd3f4c084c18b955e616e4c71bbb86 (https://next-sanity-owbq390ks.sanity.build).
We have successfully adapted this in our latest projects and can confirm this is working well for us on Next.js with React 18. However, we couldn't get the Web Previews (Preview mode in iframes) work when in Chrome Incognito and Safari. Upon investigation, I believe it's more of like how these 2 browsers don't permit cookies in iframe. I'm not so sure but just wanted to share this for it might be useful for others. Thanks!
