Giter Club home page Giter Club logo

on-demand-isr's Introduction

Deploy with Vercel

On-Demand Incremental Static Regeneration

Demo of On-demand ISR in Next.js using GitHub Issues. When a new issue is created, a webhook from a GitHub App pushes new changes to the deployed application to regenerate the static page.

Setup

  1. Create a new GitHub App
    1. Provide the URL of your deployed application for Homepage URL
    2. Ensure Webhook "Active" is checked
    3. Add <your-site>/api/webhook as the Webhook URL
    4. Create a Webhook secret and add it to .env.local as GITHUB_WEBHOOK_SECRET
    5. Give "Read Only" access to Issues
    6. Subscribe to "Issues" events
  2. Add the App ID to .env.local as GITHUB_APP_ID
  3. Generate a private key and add it to .env.local as GITHUB_APP_PK_PEM
  4. Install the newly created GitHub App for your repo
  5. https://github.com/settings/apps/<your-app-name>/installations

Running Locally

$ bun dev

Learn More

on-demand-isr's People

Contributors

arshkkk avatar leerob avatar philwolstenholme avatar rauchg avatar steven-tey avatar ycjcl868 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

on-demand-isr's Issues

Hi

Nothing to complain about, great demo.

How can I use On-Demand ISR?

If you set a revalidate time of 60, all visitors will see the same generated version of your site for one minute. The only way to invalidate the cache is from someone visiting that page after the minute has passed.

Starting with v12.1.0, Next.js supports on-demand Incremental Static Regeneration to manually purge the Next.js cache for a specific page. This makes it easier to update your site when:

  • Content from your headless CMS is created or updated
  • Ecommerce metadata changes (price, description, category, reviews, etc.)

Inside getStaticProps, you do not need to specify revalidate to use on-demand revalidation. If revalidate is omitted, Next.js will use the default value of false (no revalidation) and only revalidate the page on-demand when unstable_revalidate is called.

Usage

First, create a secret token only known by your Next.js app. This secret will be used to prevent unauthorized access to the revalidation API Route. You can access the route (either manually or with a webhook) with the following URL structure:

https://<your-site.com>/api/revalidate?secret=<token>

Next, add the secret as an Environment Variable to your application. Finally, create the revalidation API Route:

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    await res.unstable_revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

View our demo to see on-demand revalidation in action and provide feedback.

Testing on-demand ISR during development

When running locally with next dev, getStaticProps is invoked on every request. To verify your on-demand ISR configuration is correct, you will need to create a production build and start the production server:

$ next build
$ next start

Then, you are able to validate static pages are successfully revalidated.

Finally!

Been wanting this for a while, finally publishing my site next week and it's here!

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra mi quis dui porttitor convallis. Fusce ullamcorper pretium est. Sed accumsan magna justo, non pharetra libero bibendum at. Vivamus rutrum porttitor eros sed convallis. Mauris eros est, interdum ut lorem non, euismod sagittis dui. Nunc eu lobortis mauris. Integer efficitur elit ut nunc sagittis gravida. Maecenas sit amet leo eros. Duis semper nisi vitae varius varius. Aenean lobortis dolor ac massa porttitor, eu congue nulla porttitor. Aliquam ut eros nisl. Integer nec rhoncus tellus. Pellentesque ornare ipsum nec facilisis hendrerit. Curabitur blandit pulvinar nisi non viverra.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus malesuada aliquet. Donec placerat vitae nulla ut faucibus. Nam ut dolor nec ligula aliquam accumsan a vel nunc. Nullam lectus ex, placerat varius felis et, facilisis hendrerit ante. Aliquam volutpat pretium elit, dictum tempor lorem tristique in. Donec dignissim eros eget feugiat consectetur. Mauris posuere turpis quis dui semper malesuada. Donec tincidunt justo sit amet mauris faucibus, sit amet iaculis tellus commodo. Maecenas fermentum diam non neque facilisis, in consectetur nisi ullamcorper. Mauris mattis, massa id mollis ultrices, ligula orci pretium diam, quis efficitur enim urna eget mi. Vivamus cursus massa a sem iaculis, ac gravida magna euismod. Sed vitae augue arcu. Donec accumsan ac justo et dignissim.

Quisque ut facilisis ante. Donec at blandit lectus, sed ornare turpis. Nunc lobortis at mauris vitae hendrerit. Aenean ante eros, dignissim vel auctor vel, auctor eget sapien. Fusce ornare tincidunt arcu, et faucibus ipsum hendrerit sed. Etiam sit amet leo sagittis, facilisis metus ac, ultrices nunc. Praesent mattis sodales lectus, sit amet vestibulum nisl gravida id. Nunc sit amet lorem ut dolor pretium pretium. Integer sagittis est vitae lectus blandit, a consectetur nisi scelerisque. Curabitur augue metus, porttitor sit amet lacinia eget, efficitur varius orci. Nulla consectetur malesuada odio, eu suscipit est molestie nec. Sed vehicula nulla ac eros varius suscipit.

Nam posuere urna at nunc tincidunt porta. Nunc ut turpis facilisis, malesuada nisl a, iaculis arcu. Aliquam interdum at leo sit amet venenatis. Integer porttitor magna sed orci pharetra aliquet. Sed quis cursus neque. Fusce quam turpis, consectetur quis mollis id, pulvinar et nisl. Nunc nec risus libero. Curabitur lobortis porta condimentum. Ut semper magna et ultricies ornare.

Sed ultrices magna nisl, at tempus orci rhoncus at. Pellentesque leo ante, tincidunt sit amet venenatis ut, ornare vel est. Sed at elit enim. Suspendisse sit amet leo et augue sollicitudin bibendum sed non ex. Suspendisse cursus tortor nulla, in convallis elit finibus sed. Phasellus eleifend fermentum viverra. Donec a justo ac nibh cursus lacinia eget sed odio. Nam et urna accumsan, lacinia sem et, facilisis enim. Vestibulum eu posuere lacus. Fusce aliquam quam vel nibh elementum consectetur. Phasellus sit amet diam eu orci tempor congue id at ex. Aenean vitae augue ut neque rhoncus lacinia.

In feugiat tincidunt sem, sed lobortis leo volutpat ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sagittis cursus mauris. Donec luctus viverra sapien, tincidunt tristique nibh cursus et. Nullam sed risus sed erat sodales maximus nec sit amet metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id semper nisl. Quisque vehicula ultrices odio eget luctus. Pellentesque ac nibh quis erat malesuada efficitur.

Mauris at iaculis nunc. Donec tellus dui, ullamcorper ut tellus sed, viverra molestie felis. Praesent cursus lectus et augue tristique mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec dignissim libero, quis consequat libero. Nulla tristique faucibus euismod. Donec lectus nibh, aliquet id leo id, volutpat sollicitudin dui.

Vestibulum est massa, efficitur vitae metus sit amet, fermentum varius velit. Aenean placerat pulvinar lacus. Curabitur ornare purus sed egestas varius. Cras nec elit pulvinar felis maximus laoreet. Aenean dignissim vel massa eu gravida. Vivamus sed viverra ante, vitae finibus dui. Nullam ultricies ante nec libero posuere suscipit.

Nullam commodo finibus venenatis. Phasellus sit amet dapibus massa. Sed eleifend ex at tortor varius, non posuere odio tempus. Morbi et leo neque. Maecenas nec eros nisi. Nunc pretium nibh at leo vehicula gravida. Donec facilisis aliquam sem quis volutpat. Quisque sed ante rutrum, malesuada dui vel, dictum risus. Ut mattis libero nec quam vestibulum porta. Nulla ac sem neque. Pellentesque ut diam laoreet nisi mattis consequat. Nulla a pulvinar lacus. Maecenas rutrum in lacus nec interdum. Quisque mollis sodales augue, eu posuere enim commodo quis. Cras facilisis quam a tincidunt euismod.

Sed sagittis tortor sodales lectus commodo, faucibus auctor dolor aliquet. Cras rhoncus sagittis ultricies. Praesent convallis ut velit ut dictum. Quisque dignissim ante congue est vulputate, at convallis nisi efficitur. Aenean venenatis metus nec dui vehicula, sit amet feugiat leo cursus. Cras sem diam, scelerisque in sollicitudin vitae, hendrerit accumsan leo. Integer elementum vulputate nulla vel tempus. Sed nisl sem, scelerisque sit amet tempor at, egestas non ipsum. Maecenas purus lectus, elementum in gravida et, pretium vel nibh.

Curabitur aliquam commodo est lacinia posuere. Curabitur sit amet massa quis dolor convallis dictum. Aliquam viverra turpis in mi dignissim, ac volutpat nisl ornare. Aliquam convallis tellus ac molestie sodales. Mauris tempor lectus eu varius dignissim. Praesent ut erat quis nibh rutrum maximus. Nullam porta vestibulum turpis, ac accumsan mauris consequat nec. Etiam congue sed arcu non scelerisque. Vivamus at quam vel enim consectetur porttitor.

Sed mi leo, tincidunt vel neque a, sollicitudin rutrum libero. Integer venenatis elit eu sodales consequat. Praesent placerat sapien at finibus scelerisque. Mauris euismod nibh vitae sapien ullamcorper luctus. Proin facilisis, leo vel tristique consequat, diam metus molestie justo, venenatis varius leo odio ac ante. Mauris non suscipit diam. Maecenas finibus pulvinar nunc vehicula mollis. Etiam lectus diam, ultricies quis ornare nec, interdum vel tortor. Integer a odio egestas nibh blandit porta. Sed nunc purus, finibus ut consequat in, ultricies vitae mauris. Curabitur mollis magna sed elit blandit, non ultricies ante auctor. Vivamus mattis molestie lacinia. Proin mattis ipsum quam, venenatis sollicitudin massa sodales nec. Curabitur et diam ornare orci luctus finibus. Sed tincidunt, massa sit amet molestie scelerisque, est justo iaculis ante, non sagittis orci urna bibendum lectus.

Sed fermentum ut purus nec condimentum. Etiam mi neque, semper ac laoreet eu, accumsan id mauris. Maecenas sed pharetra elit. In dignissim justo porta vestibulum cursus. Morbi nec lectus ac elit aliquam scelerisque. Maecenas elementum orci et commodo ornare. Cras eget convallis tortor, non faucibus turpis. Sed congue ullamcorper neque, a posuere lacus blandit a. Donec dictum eros a purus dignissim dictum. Duis tortor enim, ornare id velit id, vehicula mollis tortor. Aliquam eu euismod tortor, vel pellentesque dolor. Quisque nisl odio, mattis in lorem vel, hendrerit maximus ipsum. Morbi id mauris vitae nulla condimentum congue. Nulla sapien purus, tincidunt at turpis sed, fermentum ultricies erat.

Sed sollicitudin lorem quis nunc egestas viverra. Pellentesque augue ante, pulvinar id faucibus sed, imperdiet ultrices mi. Morbi vehicula, mauris vitae pharetra faucibus, tortor risus tincidunt mauris, volutpat lobortis felis ex at risus. Nunc in tempus leo. Nam et leo nisi. In et dui lectus. Sed mollis turpis eget turpis bibendum congue.

Nam ac arcu et enim congue tincidunt. Phasellus vulputate, enim eu sodales interdum, arcu nisi fringilla massa, sed gravida sem nulla ac quam. Suspendisse ac dui congue, venenatis neque ut, pharetra augue. Cras elementum in nulla at tempor. Curabitur et aliquam nisl. Pellentesque sed efficitur odio, ut accumsan nisi. Pellentesque ultrices arcu et lectus semper, ut venenatis tortor ultrices. Donec dignissim velit eu facilisis euismod. Fusce in urna vitae felis feugiat laoreet. Sed nec velit sodales, iaculis lectus sed, viverra risus. Vestibulum sagittis euismod lorem eu molestie. Sed posuere augue non nulla eleifend, a commodo magna venenatis. Nulla ultrices lobortis pharetra. Maecenas id purus eros.

Morbi a eros turpis. Mauris ut magna justo. Fusce semper neque vel velit pretium, ac fermentum lacus pharetra. Nam maximus non dolor euismod malesuada. Quisque volutpat nisl a ultrices mattis. Nullam quis accumsan lacus. Duis quis felis vel turpis dignissim laoreet. Integer tristique tristique erat ac ultricies. Suspendisse lobortis urna id nisl mollis tempus vitae vitae lorem. Phasellus feugiat maximus fringilla. Vestibulum eros odio, suscipit at libero in, tempor venenatis nisi. Vivamus porta nulla vitae ligula commodo, sit amet lacinia sapien hendrerit. Sed in ex rutrum, interdum leo ut, venenatis augue. In libero orci, posuere varius diam quis, egestas ullamcorper diam. Donec sodales lacinia ex, sed interdum enim pharetra eu. Praesent viverra iaculis est quis porta.

Cras at iaculis risus. Maecenas tristique vulputate magna pharetra mattis. Nam sit amet dictum sapien. Integer condimentum dapibus ex, in semper nulla mollis sit amet. Ut ultricies nec nisi vel imperdiet. Integer pharetra tortor malesuada nisl hendrerit, ut suscipit diam pharetra. Vivamus vehicula posuere placerat. Praesent eu ante lectus. Aenean elementum mauris blandit augue consectetur, vel fermentum lacus vehicula. Duis efficitur eget massa lacinia ultricies. Suspendisse potenti. Phasellus ultricies sagittis nisl, non lacinia leo luctus eu. Curabitur sagittis sagittis nibh quis rutrum. Nunc interdum interdum nisl, eget tempor neque volutpat eget.

Duis eu ultricies leo, in ultrices nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla luctus nisi ut magna interdum, quis posuere libero porta. Suspendisse potenti. Phasellus eget magna volutpat, luctus lorem a, commodo nulla. Ut aliquam enim in ligula ornare porta. Vivamus nec elit fringilla, gravida odio porta, vulputate lacus. Mauris vestibulum sapien eu enim dapibus vulputate.

Vivamus a turpis diam. Sed nec nisi varius, condimentum lectus quis, fermentum felis. Maecenas dignissim risus sit amet condimentum varius. Donec vulputate justo ultrices sapien egestas ornare eu vel purus. Aenean lacinia tellus lorem, nec mattis orci tempor sed. Nulla interdum ex eu libero pretium venenatis. Sed nisl sapien, bibendum sit amet semper fringilla, dapibus vel enim. In vel arcu ac massa blandit pellentesque.

Ut blandit ac dolor et dictum. Cras finibus odio quis augue suscipit tincidunt. Mauris pharetra finibus tortor, id efficitur diam venenatis nec. Nam sodales mattis justo, at mollis magna ullamcorper id. Fusce tristique massa sem. Nulla scelerisque, ligula in tempus hendrerit, felis tortor scelerisque quam, nec dignissim justo felis quis nunc. Donec non odio quis nulla ultricies egestas. Pellentesque sit amet tellus eu justo fringilla accumsan. Nam non dapibus libero. Aenean varius mauris sem, ac faucibus augue consectetur vitae. Nullam pellentesque sapien a placerat condimentum.

Yo

This is dope af. Great job! ๐Ÿ™Œ๐Ÿป

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.