Skip to content

Commit

Permalink
Update preview mode example to say draft mode (vercel#699)
Browse files Browse the repository at this point in the history
### Description

We're changing the name of Preview Mode to Draft mode.
- [Next docs
update](https://nextjs.org/docs/pages/building-your-application/configuring/draft-mode)

Vercel docs updates are in the works.

<!--
✍️ Write a short summary of your work. Screenshots and videos are
welcome!
-->

### Demo URL

<!--
Provide a URL to a live deployment where we can test your PR. If a demo
isn't possible feel free to omit this section.
-->

### Type of Change

- [ ] New Example
- [x] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

---------

Co-authored-by: Steven <[email protected]>
  • Loading branch information
S3Prototype and styfle authored May 12, 2023
1 parent 542d735 commit 3712de9
Show file tree
Hide file tree
Showing 10 changed files with 26 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ const bypassToken = '87734ad8259d67c3c11747d3e4e112d0'

module.exports = (req, res) => {
res.setHeader('Content-Type', 'text/html; charset=utf-8')
const isPreviewMode =
const isDraftMode =
typeof req.headers.cookie === 'string' &&
req.headers.cookie.includes(`__prerender_bypass=${bypassToken}`)
const contents = isPreviewMode
? 'Preview Mode is <strong>ENABLED</strong>. Notice how the "Server time" below gets updated every time you refresh!'
: 'Preview Mode is <strong>DISABLED</strong>. The "server time" below will only get updated once per minute.'
const enable = isPreviewMode
? '<a href="/logout">Deactivate Preview Mode</a>'
: '<a href="/login">Enable Preview Mode</a>'
const contents = isDraftMode
? 'Draft Mode is <strong>ENABLED</strong>. Notice how the "Server time" below gets updated every time you refresh!'
: 'Draft Mode is <strong>DISABLED</strong>. The "server time" below will only get updated once per minute.'
const enable = isDraftMode
? '<a href="/logout">Deactivate Draft Mode</a>'
: '<a href="/login">Enable Draft Mode</a>'
res.end(`
<h1>Preview Mode Example</h1>
<h1>Draft Mode Example</h1>
<p>${contents}</p>
<p>Server time: ${new Date().toISOString()}</p>
<p>${enable}</p>
Expand Down
18 changes: 18 additions & 0 deletions build-output-api/draft-mode/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Draft Mode

## Build Output API

This Prebuilt Deployment example demonstrates how to implement "Draft Mode" when using the [Build Output API](https://vercel.com/docs/build-output-api/v3#features/draft-mode).

### Demo

https://build-output-api-draft-mode.vercel.sh

### How it Works

When using Prerender Functions, you may want to implement "Draft Mode" which would allow you to bypass the caching
aspect of prerender functions, i.e. while writing draft blog posts before they are ready to be published.

To implement this, the `bypassToken` of the [`<name>.prerender-config.json`](./.vercel/output/functions/index.prerender-config.json) file should be set to a randomized string that you generate at build-time. This string should not be exposed to users / the client-side, except under authenticated circumstances.

To enable "Draft Mode", a cookie with the name `__prerender_bypass` needs to be set (i.e. by a Serverless Function) with the value of the `bypassToken`. When the Prerender Function endpoint is accessed while the cookie is set, then "Draft Mode" will be activated, bypassing any caching that Vercel would normally provide when not in Draft Mode.
18 changes: 0 additions & 18 deletions build-output-api/preview-mode/README.md

This file was deleted.

0 comments on commit 3712de9

Please sign in to comment.