Skip to content

Instantly share code, notes, and snippets.

@mkotsollaris

mkotsollaris/index.js

Created April 15, 2022 17:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mkotsollaris/48c94ec98d0b6490fb6d1db9078e5690 to your computer and use it in GitHub Desktop.
Save mkotsollaris/48c94ec98d0b6490fb6d1db9078e5690 to your computer and use it in GitHub Desktop.
Download ZIP
getStaticProps always re-invalidates the page, regardless of the given timestamp
Raw
index.js
import Head from 'next/head';
export async function getStaticProps() {
console.log("START getStaticProps");
// {
// "data": {
// "repository": {
// "issue": {
// "reactionGroups": [
// { "content": "THUMBS_UP", "users": { "totalCount": 0 } },
// { "content": "THUMBS_DOWN", "users": { "totalCount": 0 } },
// { "content": "LAUGH", "users": { "totalCount": 0 } },
// { "content": "HOORAY", "users": { "totalCount": 0 } },
// { "content": "CONFUSED", "users": { "totalCount": 0 } },
// { "content": "HEART", "users": { "totalCount": 0 } },
// { "content": "ROCKET", "users": { "totalCount": 0 } },
// { "content": "EYES", "users": { "totalCount": 0 } }
// ]
// }
// }
// }
// }
const res = await fetch('https://api.github.com/graphql', {
method: 'POST',
headers: {
Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
},
body: JSON.stringify({
query: `query {
repository(owner:"vercel", name:"reactions") {
issue(number:1) {
reactionGroups {
content
users(first: 0) {
totalCount
}
}
}
}
}`,
}),
});
const json = await res.json();
if (res.status !== 200) {
console.error(json);
throw new Error('Failed to fetch API');
}
// [0, 0, 0, 0, 0, 0, 0, 0]
const reactions = json.data.repository.issue.reactionGroups.map(
(item) => item.users.totalCount
);
console.log("FINISH getStaticProps");
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = (currentHours < 12) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = (currentHours == 0) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
return {
props: {
reactions,
currentTimeString
},
revalidate: 60,
};
}
export default function Home({ reactions, currentTimeString }) {
return (
<div className="container">
<Head>
<title>Static Reactions Demo</title>
<link rel="icon" href="/favicon.ico" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="Static Reactions Demo" />
<meta
property="og:description"
content="Using Next.js Incremental Static Regeneration"
/>
<meta
property="og:image"
content="https://og-image.vercel.app/Incremental%20Static%20Regeneration%20Demo%20using%20**GitHub%20Reactions**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg"
/>
</Head>
<main>
<h2>Static Reactions Demo</h2>
<h3>
Reactions on{' '}
<a href="https://github.com/vercel/reactions/issues/1">
this GitHub issue
</a>
:
</h3>
<div className="line">
<span className="emoji">👍</span> <strong>{currentTimeString}</strong>
</div>
<div className="line">
<span className="emoji">👍</span> <strong>{reactions[0]}</strong>
</div>
<div className="line">
<span className="emoji">👎</span> <strong>{reactions[1]}</strong>
</div>
<div className="line">
<span className="emoji">😄</span> <strong>{reactions[2]}</strong>
</div>
<div className="line">
<span className="emoji">🎉</span> <strong>{reactions[3]}</strong>
</div>
<div className="line">
<span className="emoji">😕</span> <strong>{reactions[4]}</strong>
</div>
<div className="line">
<span className="emoji">🧡</span> <strong>{reactions[5]}</strong>
</div>
<div className="line">
<span className="emoji">🚀</span> <strong>{reactions[6]}</strong>
</div>
<div className="line">
<span className="emoji">👀</span> <strong>{reactions[7]}</strong>
</div>
<br />
<div>
<strong>Explanation:</strong> This page is statically generated with{' '}
<a href="https://nextjs.org/">Next.js</a> by fetching data from
GitHub. It's deployed to{' '}
<a href="https://vercel.com/docs/v2/edge-network/overview">
Vercel's Edge Network
</a>{' '}
(CDN). Importantly, this page is being re-generated using{' '}
<a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration">
Incremental Static Regeneration
</a>{' '}
(released in{' '}
<a href="https://nextjs.org/blog/next-9-5">Next.js 9.5</a>). Here's
how it works:
</div>
<ol>
<li>
Each Next.js page can define the timeout. For this page, it's set at
1 second.
</li>
<li>
When a new request comes in, the statically generated page is
served.
</li>
<li>
Later, when another request comes in{' '}
<strong>after the defined timeout is exceeded</strong>: (1) The
statically generated page is served, and (2){' '}
<strong>
Next.js generates a new version of the page in the background and
updates the static page for *future* requests
</strong>
.
</li>
<li>
Later, when another request comes in{' '}
<strong>after the regeneration is done</strong>: The updated static
page is served.
</li>
<li>
This allows Incremental Static Regeneration on a per-page basis
without rebuilding the full app. It'll always be fast because users
will always get a static response.{' '}
<a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration">
Learn more here
</a>
.
</li>
<li>
<b>Update 2022:</b> Next.js 12.1 now allows you to also revalidate
on-demand.{' '}
<a href="https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta">
Learn more here
</a>
.
</li>
</ol>
<div>
<strong>Source:</strong>{' '}
<a href="https://github.com/vercel/reactions/blob/master/pages/index.js">
pages/index.js
</a>{' '}
- `getStaticProps()` fetches the data during static generation, and
`revalidate` specifies the timeout.
</div>
</main>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment