Static Tweet Next.js Demo

This demo shows off the next-gen Static Site Generation capabilities in Next.js. The following tweet:

was inlined into the HTML of this page (`pages/index.js`) by using `getStaticProps` in your Next.js page (source »).

That means no Twitter embed `<iframe>`, no JS, no layout and scrolling jumps, no slowness, great SEO, great lighthouse scores:

To see this in action, try statically rendering your very own tweet it:

How is this possible? The deploy time for this project was 30 seconds. We couldn’t have possibly statically generated all tweets. Each day, 500M tweets are added »!

Incremental Static Generation#

When you visit `https://static-tweet.now.sh/{tweetId}` you’ll notice that if the tweet has never been rendered before, you’ll get a skeleton page.

After you refresh that page, you’ll get the static HTML, no matter what edge in the global network » you are visiting.

Because it’s static HTML, if Twitter disappears from the internet, you have strong guarantees of its high availability, backed by redundant storage.

This is all enabled by a simple option: `fallback: true` in `getStaticPaths`. In this case, this is defined in the Next.js page called `pages/[tweet].js` (source »).

The `getStaticPaths` hook allows you to give Next.js the set of IDs you want to generate at build time.

When you define a fallback, you get the power to continue lazily building pages at runtime as well. Unlike traditional Server Side Rendering (SSR), the initial request is always instant (the fallback itself is also static), you don’t worry about configuring caching and the work is only done once globally.

Resources:

• Source code » for this page
• Next.js documentation » for `getStaticProps` and `getStaticPaths`
• Learn about our RFC for incrementally updating existing pages »
• Get started learning Next.js from scratch »

Author: Luis Alvarez
@luis_fades » – Next.js core contributor