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.
Serverless Pre-Rendering Landing Page
Home Page: https://spr-landing.vercel.sh/
License: MIT License
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.
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?
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
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:
X-version
here? What happens if I don't define it?_app:getInitialProps
), what would happen if I just add those two lines in _app/getInitialProps
?how do I implement with it?
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
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.
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.
require wouldn't work in client-side, it should be probably in if (res) {
block
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
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.