vercel / spr-landing

Serverless Pre-Rendering Landing Page

Serverless Pre-Rendering Demo

Read the blog post      Checkout the demo

Developing

By default, the content on the site is based off our public Notion page.

To edit and create content through your own Notion page, sign up for Notion, and update the PAGE_ID environment variable with your page ID.

Deploying

More Examples

• Notion Blog

spr-landing's Issues

Image src starts with `image.js?...`

Seemed all image sources coming from notion were in following format, wondering how do one handle it so that they can be correctly displayed?

/image.js?url=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd8974e34-1163-4e26-a053-6180ea554871%2Fbridge.jpg

Refactor with SWR

should likely be refactored with SWR https://github.com/zeit/swr

possibly blocked on vercel/swr#11

It's good for most blog style content to be ssr for SEO purposes

"Statically generated websites (...) don't scale beyond a few pages."

Hello !

"Statically generated websites (...) don't scale beyond a few pages."

(from https://spr-landing.zeit.sh/ )

This sentence is misleading : it gives the false impression than "Statically generated websites" can only handle 5 or 20 pages; which is wrong; they can handle, with decent build times, hundreds or thousands of pages.

`require("crypto")` inside getInitialProps?

require wouldn't work in client-side, it should be probably in if (res) { block

getStaticPath

how do I implement with it?

Better source code documentation - Questions about how it works

I've read https://zeit.co/blog/serverless-pre-rendering and I'm interested by SPR, but I don't fully understand how it works.

AFAIU, everything is done there https://github.com/zeit/spr-landing/blob/master/pages/index.js#L177-L180

  if (res) {
    res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
    res.setHeader("X-version", etag);
  }

Few questions:

• What's the goal of X-version here? What happens if I don't define it?
• How does this cache implementation works? I don't understand how defining a 1s cache can change anything performance-wise.
• Basically, considering I have a Next.js app which does SSR (fetching content from a headless CMS in _app:getInitialProps), what would happen if I just add those two lines in _app/getInitialProps?

Error: Notion API error (400)

I really (really) want to understand how this project works, but I can't get it to run. Steps to reproduce:

git clone [email protected]:vercel/spr-landing.git
cd spr-landing
npm install
npm run dev
open http://localhost:3000

The sister blog project at https://github.com/ijjk/notion-blog runs, but its notion libs are very different than this project.

Complete output:

$ npm run dev

> [email protected] dev
> next

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
(node:78615) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/douglasjarquin/Git/spr-landing/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
Error: Notion API error (400) 
{"date":["Mon, 05 Jul 2021 03:13:51 GMT"],"content-type":["application/json; charset=utf-8"],"content-length":["102"],"connection":["close"],"x-dns-prefetch-control":["off"],"x-frame-options":["SAMEORIGIN"],"strict-transport-security":["max-age=5184000; includeSubDomains"],"x-download-options":["noopen"],"x-content-type-options":["nosniff"],"x-xss-protection":["1; mode=block"],"referrer-policy":["same-origin"],"content-security-policy":["script-src 'self' 'unsafe-inline' 'unsafe-eval' https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://embed.typeform.com https://admin.typeform.com https://public.profitwell.com js.sentry-cdn.com https://platform.twitter.com https://cdn.syndication.twimg.com https://www.googletagmanager.com https://x.clearbitjs.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so ws://localhost:* https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://www2.profitwell.com https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:"],"x-content-security-policy":["script-src 'self' 'unsafe-inline' 'unsafe-eval' https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://embed.typeform.com https://admin.typeform.com https://public.profitwell.com js.sentry-cdn.com https://platform.twitter.com https://cdn.syndication.twimg.com https://www.googletagmanager.com https://x.clearbitjs.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so ws://localhost:* https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://www2.profitwell.com https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:"],"x-webkit-csp":["script-src 'self' 'unsafe-inline' 'unsafe-eval' https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://embed.typeform.com https://admin.typeform.com https://public.profitwell.com js.sentry-cdn.com https://platform.twitter.com https://cdn.syndication.twimg.com https://www.googletagmanager.com https://x.clearbitjs.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so ws://localhost:* https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://www2.profitwell.com https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:"],"set-cookie":["notion_browser_id=7512b46e-fcf5-479e-b571-47f8f7448680; Domain=www.notion.so; Path=/; Expires=Thu, 13 Mar 2053 05:00:31 GMT; Secure"],"etag":["W/\"66-UIyDj6lW1DpifiQKTV5sBl2QIqU\""],"vary":["Accept-Encoding"],"cf-cache-status":["DYNAMIC"],"expect-ct":["max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\""],"server":["cloudflare"],"cf-ray":["669d6b789f9c3710-MIA"]}
 {"errorId":"1d6cb9b0-c129-412e-866a-3a76464aaf55","name":"ValidationError","message":"Invalid input."}
    at rpc (webpack-internal:///./lib/notion/rpc.ts:24:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getNotionData (webpack-internal:///./lib/notion/index.ts:9:16)
    at async getStaticProps (webpack-internal:///./pages/index.js:293:22)
    at async renderToHTML (/Users/douglasjarquin/Git/spr-landing/node_modules/next/dist/next-server/server/render.js:28:109)
    at async /Users/douglasjarquin/Git/spr-landing/node_modules/next/dist/next-server/server/next-server.js:98:97
    at async __wrapper (/Users/douglasjarquin/Git/spr-landing/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/Users/douglasjarquin/Git/spr-landing/node_modules/next/dist/next-server/server/next-server.js:123:387)
    at async DevServer.renderToHTML (/Users/douglasjarquin/Git/spr-landing/node_modules/next/dist/next-server/server/next-server.js:124:473)

Q: React Demo

Is there a React SPR demo floating around somewhere? Given this is the example repo for a Next.js version I figure it's the most appropriate place I've seen so far to make a query about the existence of a React one.

Can it work for multiple pages with Link?

Hi,
I try to add Next`s Link to another sample page, but it ends with a weird error about hooks. Even when I commented out hooks

I create a fork with example https://github.com/PetrSnobelt/spr-landing

Should it work with <Link prefetch, or only SSR is supported?

TypeError: Cannot read property 'title' of undefined

node - v v12.2.0
git clone https://github.com/zeit/spr-landing/
now dev

Usage with gatsby

I have a Gastby site deployed with now. Where should these lines be going: res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");?

Or can I only us this feature with NextJS?

https://github.com/zeit/spr-landing/blob/master/pages/index.js#L178-L181