{"id":31676,"date":"2024-08-12T08:19:12","date_gmt":"2024-08-12T13:19:12","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31676"},"modified":"2025-03-31T16:04:48","modified_gmt":"2025-03-31T21:04:48","slug":"on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/","title":{"rendered":"On-Demand ISR Support for Next.js\/Faust.js on WP Engine\u2019s Headless Platform"},"content":{"rendered":"\n<p>WP engine\u2019s headless WordPress hosting platform is the go-to end-to-end solution for the headless approach. In this article, I will discuss and guide you through the easy implementation of the latest feature on the platform: Support for On-Demand ISR on Next.js\/Faust.js. By the end of this article, you will have a better understanding of On-Demand ISR and using the headless WP platform to support it with Next.js\/Faust.js.<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-7a03825d wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"Prerequisites\">\n<li><a href=\"#prerequisites\">Prerequisites<\/a><\/li>\n\n\n\n<li><a href=\"#what-is-on-demand-isr\">What is On-Demand ISR?<\/a><\/li>\n\n\n\n<li><a href=\"#why-use-it-in-headlesswp\">Why Use it in headless WordPress?<\/a><\/li>\n\n\n\n<li><a href=\"#configuring-with-headlesswp\">Configuring Next.js with the headless WP Platform for On-Demand ISR<\/a><\/li>\n\n\n\n<li><a href=\"#atlas-next-package\">Atlas-Next Package<\/a><\/li>\n\n\n\n<li><a href=\"#faustjs-wrapper\">Faust.js Wrapper<\/a><\/li>\n\n\n\n<li><a href=\"#create-api-route\">Create an API Route<\/a><\/li>\n\n\n\n<li><a href=\"#use-api-to-configure-cache-revalidation\">Use the API route to configure cache revalidation<\/a><\/li>\n\n\n\n<li><a href=\"#headlesswp-user-portal\">Headless WP User Portal<\/a><\/li>\n\n\n\n<li><a href=\"#limitations\">Limitations<\/a><\/li>\n\n\n\n<li><a href=\"#conclusions\">Conclusions<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<p>If you prefer the video format of this video, you can access it here:<\/p>\n\n\n\n<iframe class=\"youtube-video\" src=\"https:\/\/www.youtube.com\/embed\/v6QExVbX_UM?si=U9T7daOFDPHUyn1B\" title=\"YouTube video player\" frameborder=\"0\" style=\"display: block; margin: auto; width: 100%; height: 400px;\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\"><strong>Prerequisites<\/strong><\/h2>\n\n\n\n<p>Before reading this article, you should have the following prerequisites checked off:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic knowledge of Next.js and Faust.js.<\/li>\n\n\n\n<li>A WP engine headless WordPress account and environment set up.<\/li>\n\n\n\n<li>Node.js and npm are installed on your local machine.<\/li>\n<\/ul>\n\n\n\n<p>If you do not and need a basic understanding of Next.js and Faust.js, please visit the docs:<\/p>\n\n\n\n<p><a href=\"https:\/\/nextjs.org\/docs\">https:\/\/nextjs.org\/docs<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/faustjs.org\/tutorial\/get-started-with-faust\">https:\/\/faustjs.org\/tutorial\/get-started-with-faust<\/a><\/p>\n\n\n\n<div class=\"wp-block-group has-base-color has-heliotrope-background-color has-text-color has-background has-link-color wp-elements-60580c77f35127ab4c58efd3ae854863 has-global-padding is-layout-constrained wp-container-core-group-is-layout-9b866ece wp-block-group-is-layout-constrained\" style=\"border-radius:12px;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-4bb02320 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p style=\"font-size:26px;font-style:normal;font-weight:700;letter-spacing:-1px;line-height:1\">Headless<br>Platform<\/p>\n\n\n\n<p class=\"has-small-font-size wp-container-content-9cfa9a5a\" style=\"line-height:1.5\">The all-in-one platform for <br>radically fast headless sites.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b315634e wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/headless-platform\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Try for free \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-on-demand-isr\">What is On-Demand ISR?<\/h2>\n\n\n\n<p><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/data-fetching\/incremental-static-regeneration#on-demand-revalidation\">On-Demand Incremental Static Regeneration (ISR)<\/a> is a feature that allows you to manually purge the Next.js cache for specific pages, enabling more dynamic and timely updates to your site. Typically, in regular ISR when you set a revalidate time, such as 60 seconds, all visitors will see the same generated version of your site for that duration. The cache is only invalidated when someone visits the page after the revalidation period has passed.<\/p>\n\n\n\n<p>With the introduction of On-Demand ISR in Next.js version 12.2.0, you can now trigger cache invalidation manually, providing greater flexibility in updating your site. This is particularly useful when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content from your headless CMS is created or updated.<\/li>\n\n\n\n<li>E-commerce metadata changes, such as price, description, category, or reviews, are made.<\/li>\n<\/ul>\n\n\n\n<p>This feature streamlines the process of reflecting changes on your site in real-time, ensuring that your content is always fresh and up-to-date.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-use-it-in-headlesswp\">Why Use it in headless WordPress?<\/h2>\n\n\n\n<p>In headless WordPress, the front end is decoupled from the WordPress backend, often using Next.js and Faust.js to render the website. This architecture offers several advantages, such as potential for improved performance, enhanced security, and greater flexibility in choosing front-end technologies.<\/p>\n\n\n\n<p>However, one challenge with headless WordPress is ensuring that content changes in WordPress are reflected on the front end without sacrificing performance. This is where On-Demand ISR becomes crucial. By leveraging On-Demand ISR, you can achieve the following benefits:<\/p>\n\n\n\n<p><strong>Up-to-date Content:<\/strong> On-Demand ISR allows your site to fetch the latest content updates from WordPress manually, as needed. Unlike regular ISR, which checks for updates at specified intervals, On-Demand ISR lets you trigger cache invalidation whenever content is created or updated in WordPress. This ensures that users see the most recent content without waiting for a revalidation period.<\/p>\n\n\n\n<p><strong>Enhanced Performance:<\/strong> Since On-Demand ISR updates only the specific pages that need regeneration at the moment they are triggered, your site remains fast and responsive. Initial load times are minimized, and only the changed content is updated, reducing server load and build times.<\/p>\n\n\n\n<p><strong>SEO Benefits:<\/strong> Static pages are highly favored by search engines due to their speed and reliability. With On-Demand ISR, you maintain the SEO advantages of static generation while ensuring that your content is always fresh and relevant, as updates are reflected immediately after they are triggered.<\/p>\n\n\n\n<p><strong>Scalability:<\/strong> On-Demand ISR enables your site to handle large volumes of content efficiently. Whether you\u2019re running a blog with frequent updates or an e-commerce site with dynamic product listings, On-Demand ISR ensures that your site scales seamlessly.<\/p>\n\n\n\n<p>All those benefits got me stoked! Let\u2019s get it on our Next.js and Faust.js sites!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configuring-with-headlesswp\"><strong>Configuring Next.js with the headless WP Platform for On-Demand ISR<\/strong><\/h2>\n\n\n\n<p>Let&#8217;s configure our Next.js application to work with On-Demand ISR.<\/p>\n\n\n\n<p>Here is the docs link to the <a href=\"https:\/\/developers.wpengine.com\/docs\/atlas\/framework-guides\/next-js\/nextjs-isr-support\/#on-demand-incremental-static-regeneration\">headless WordPress platform support for On-Demand ISR.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"atlas-next-package\">Atlas-Next Package<\/h3>\n\n\n\n<p>In your Next.js project, go to your terminal and install the <a href=\"https:\/\/www.npmjs.com\/package\/@wpengine\/atlas-next\">@wpengine\/atlas-next package<\/a>:<\/p>\n\n\n\n<p><code>npm install --save @wpengine\/atlas-next<\/code><\/p>\n\n\n\n<p>This package provides improved support on the headless WP platform. Once you install it, ensure it is in your project by navigating to your <code>package.json<\/code> file at the root of your project:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"atlas-on-demand-isr\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"version\"<\/span>: <span class=\"hljs-string\">\"0.1.0\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"private\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"scripts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"dev\"<\/span>: <span class=\"hljs-string\">\"next dev\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"build\"<\/span>: <span class=\"hljs-string\">\"next build\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"start\"<\/span>: <span class=\"hljs-string\">\"next start\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"lint\"<\/span>: <span class=\"hljs-string\">\"next lint\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"dependencies\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"@wpengine\/atlas-next\"<\/span>: <span class=\"hljs-string\">\"^1.3.0-beta.0\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"next\"<\/span>: <span class=\"hljs-string\">\"14.2.4\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"react\"<\/span>: <span class=\"hljs-string\">\"^18\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"react-dom\"<\/span>: <span class=\"hljs-string\">\"^18\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"devDependencies\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"eslint\"<\/span>: <span class=\"hljs-string\">\"^8\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"eslint-config-next\"<\/span>: <span class=\"hljs-string\">\"14.2.4\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"postcss\"<\/span>: <span class=\"hljs-string\">\"^8\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"tailwindcss\"<\/span>: <span class=\"hljs-string\">\"^3.4.1\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now that you have verified the proper installation, staying at the root of your project,&nbsp; modify your <code>next.config.js<\/code> file like so:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> { withAtlasConfig } = <span class=\"hljs-keyword\">require<\/span>(<span class=\"hljs-string\">\"@wpengine\/atlas-next\"<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/** <span class=\"hljs-doctag\">@type<\/span> {import('next').NextConfig} *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> nextConfig = {\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\u00a0<span class=\"hljs-comment\">\/\/ Your existing Next.js config<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>};\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>module.exports = withAtlasConfig(nextConfig);\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"faustjs-wrapper\"><strong>Faust.js Wrapper<\/strong> and Next.js\/React.js Versions<\/h3>\n\n\n\n<p>If you are using Faust.js, please note that you need to update your Next.js to a minimum of 13.5.1 and React versions to 18.3.1 for this feature to work in Faust.  <strong><em>The <code>npx<\/code> utility command that pulls down the Faust.js boilerplate from the Faust docs comes with Next.js 12 by default.  So please change this if using that package.<\/em><\/strong><\/p>\n\n\n\n<p>Following the update to your versions, all you need to do is modify your <code>next.config.js<\/code> file using the <code>withFaust<\/code> wrapper:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> { withFaust } = <span class=\"hljs-keyword\">require<\/span>(<span class=\"hljs-string\">\"@faustwp\/core\"<\/span>)\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> { withAtlasConfig } = <span class=\"hljs-keyword\">require<\/span>(<span class=\"hljs-string\">\"@wpengine\/atlas-next\"<\/span>)\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/** <span class=\"hljs-doctag\">@type<\/span> {import('next').NextConfig} *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> nextConfig = {\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-comment\">\/\/ Your existing Next.js config<\/span>\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>module.exports = withFaust(withAtlasConfig(nextConfig))\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Next, we need to verify that it works.&nbsp; Run your app in dev mode via npm run dev and you should see this output in your terminal:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-10.28.23\u202fAM-1024x405.png\" alt=\"\" class=\"wp-image-31677\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-10.28.23\u202fAM-1024x405.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-10.28.23\u202fAM-300x119.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-10.28.23\u202fAM-768x304.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-10.28.23\u202fAM-1536x608.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-10.28.23\u202fAM.png 1950w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Stoked! It works!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-api-route\">Create an API route<\/h3>\n\n\n\n<p>The first thing we need to do is create an API route.&nbsp; This will allow you to pass the path to be revalidated as a parameter.<\/p>\n\n\n\n<p><strong>Step 1.<\/strong> Create the API route file: Navigate to the <code>pages\/api <\/code>directory in your Next.js project and create a new file named <code>revalidate.js<\/code>.<\/p>\n\n\n\n<p><strong>Step 2.<\/strong> Add the API Route code: Open <code>revalidate.js<\/code> and add the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handler<\/span>(<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-comment\">\/\/ Check for a secret token to authenticate the request<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">if<\/span> (req.query.secret !== process.env.MY_SECRET_TOKEN) {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">401<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Invalid token'<\/span> });\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> path = req.query.path;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-comment\">\/\/ Ensure the path parameter is provided<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">if<\/span> (!path) {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">400<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Path query parameter is required'<\/span> });\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">try<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">\/\/ Revalidate the specified path<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">await<\/span> res.revalidate(path);\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">return<\/span> res.json({ <span class=\"hljs-attr\">revalidated<\/span>: <span class=\"hljs-literal\">true<\/span> });\n<\/span><\/span><span class='shcb-loc'><span>  } <span class=\"hljs-keyword\">catch<\/span> (err) {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Error revalidating'<\/span>, <span class=\"hljs-attr\">error<\/span>: err.message });\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Step 3.<\/strong>&nbsp; Configure the environment variables: Create a <code>.env.local<\/code> file in the root of your project if it does not exist already.<\/p>\n\n\n\n<p><strong>Step 4.<\/strong>  Next, create a secret token. This code sets up an API route that checks for a secret token for security, validates the presence of the path parameter, and triggers the revalidation of the specified path.<\/p>\n\n\n\n<p>Once you have Node.js installed, you can use it to generate a secret token.<\/p>\n\n\n\n<p><strong>Open Your Terminal<\/strong>: Start by opening your terminal or command prompt.<\/p>\n\n\n\n<p><strong>Generate a Secret Token<\/strong>: Run the following command in your terminal:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>node -e \"console.log(require('crypto').randomBytes(32).toString('hex'))\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p>This command uses the crypto module to generate a 32-byte random string in hexadecimal format. The output will be your secret token.<\/p>\n\n\n\n<p>Once the token is generated, copy and paste it into your <code>.env.local <\/code>file and give it an environment variable name e.g. <code>`REVALIDATION_SECRET`&nbsp;<\/code><\/p>\n\n\n\n<p>It should look like this: <code>REVALIDATION_SECRET=your-secret-key<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-api-to-configure-cache-revalidation\">Use the API route to configure cache revalidation<\/h3>\n\n\n\n<p>To configure cache revalidation in the headless WordPress setup, you could follow one of the approaches below:<\/p>\n\n\n\n<p><strong>Use a webhook plugin<\/strong>: You can use plugins like <a href=\"https:\/\/wordpress.org\/plugins\/wp-webhooks\/\">WP Webhooks<\/a> to enable webhook functionality and trigger the API endpoint you\u2019ve just created when relevant events occur, such as when a post is published or updated.<\/p>\n\n\n\n<p>When you have your secret key generated and need an API endpoint, append a query string parameter to it with the key and value pair, where the key is secret and the value is the secret token. For instance:<\/p>\n\n\n\n<p><a href=\"http:\/\/localhost:3000\/api\/revalidate?secret=your-secret-key&amp;path=\/your-route\">https:\/\/your-wordpress-site.com\/api\/revalidate?secret=your-secret-key&amp;path=\/your-route<\/a><\/p>\n\n\n\n<p>This is the endpoint you can embed in a field that requires it when using a plugin like WP Webhooks. The field will correlate to whatever action will happen when the endpoint that is associated with this path is hit such as updating a post.  <\/p>\n\n\n\n<p>Just a note, if you are developing locally and want to test it, you will have to manually visit the endpoint which typically spins up on port 3000 since the app will only know when to revalidate it on your local machine.<\/p>\n\n\n\n<p><strong>Set up WordPress hooks<\/strong>: You can also add actions in your WordPress theme or plugin to send requests to your Next.js API route. Here\u2019s an example using the <code>wp_remote_post<\/code> function in <code>php<\/code>, which will send a POST request to the Next.js API route whenever a post is saved in WordPress, triggering the revalidation of the corresponding path:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">trigger_revalidation<\/span><span class=\"hljs-params\">($post_id)<\/span> <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>  $url = <span class=\"hljs-string\">'https:\/\/your-nextjs-site.com\/api\/revalidate?secret=your-secret-token&amp;path='<\/span> . get_permalink($post_id);\n<\/span><\/span><span class='shcb-loc'><span>  \n<\/span><\/span><span class='shcb-loc'><span>  $response = wp_remote_post($url);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">if<\/span> (is_wp_error($response)) {\n<\/span><\/span><span class='shcb-loc'><span>    error_log(<span class=\"hljs-string\">'Error triggering revalidation: '<\/span> . $response-&gt;get_error_message());\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>add_action(<span class=\"hljs-string\">'save_post'<\/span>, <span class=\"hljs-string\">'trigger_revalidation'<\/span>);\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"headlesswp-user-portal\">Headless WordPress Platform User Portal<\/h3>\n\n\n\n<p>We now have On-Demand ISR set up with the proper configuration. The last steps are to connect our remote repository to WP engine&#8217;s headless WP platform, git push any changes, and observe On-Demand ISR working in all its cache invalidation glory.<\/p>\n\n\n\n<p>If you have not connected your local project to a remote repository, go ahead and do so.&nbsp; WP engine headless platform supports GitHub, Bitbucket, and GitLab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"329\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.51.20\u202fPM-1024x329.png\" alt=\"\" class=\"wp-image-31679\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.51.20\u202fPM-1024x329.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.51.20\u202fPM-300x96.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.51.20\u202fPM-768x247.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.51.20\u202fPM-1536x494.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.51.20\u202fPM-2048x658.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you have connected your remote repository and added all your necessary environment variables, go ahead and build the app. If you have done this with an existing repo, you can&nbsp;<code>git push<\/code>&nbsp;the change, which will trigger a build.<\/p>\n\n\n\n<p>When the application is finished in the build step, you are on the&nbsp;<em>main<\/em>&nbsp;page of the WP engine headless WP portal.&nbsp; Navigate over to the&nbsp;<strong>Logs<\/strong>&nbsp;subpage:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.57.03\u202fPM-1024x567.png\" alt=\"\" class=\"wp-image-31680\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.57.03\u202fPM-1024x567.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.57.03\u202fPM-300x166.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.57.03\u202fPM-768x425.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.57.03\u202fPM-1536x850.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-2.57.03\u202fPM-2048x1134.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the&nbsp;<em>Logs<\/em>&nbsp;subpage, click the&nbsp;<strong>\u201cShow logs\u201d<\/strong>&nbsp;button on the Runtime option:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"418\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.00.45\u202fPM.png\" alt=\"\" class=\"wp-image-31681\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.00.45\u202fPM.png 819w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.00.45\u202fPM-300x153.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.00.45\u202fPM-768x392.png 768w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/figure>\n\n\n\n<p>You should see the same output focusing on line 6 as you did in your terminal to ensure it\u2019s working properly:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"337\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.01.48\u202fPM.png\" alt=\"\" class=\"wp-image-31682\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.01.48\u202fPM.png 689w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-08-at-3.01.48\u202fPM-300x147.png 300w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<p>Awesome!!! It is implemented and working in runtime.&nbsp; Now, when you edit or input new content in your WP backend, and then visit the live URL of the WP engine headless WP site you just deployed, the ISR should work on demand like so:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/ODISR.gif\" alt=\"\" class=\"wp-image-31685\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"limitations\">Limitations<\/h2>\n\n\n\n<p>At the moment, the headless WP platform supports On-Demand ISR with the following limitations:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Requires @wpengine\/atlas-next package<\/strong>: To enable On-Demand ISR on Atlas, you must use the&nbsp;<code>@wpenngine\/atlas-next<\/code>&nbsp;package and follow the setup steps outlined in the previous sections of this document.<\/li>\n\n\n\n<li><strong>On-demand ISR for App Router is not supported<\/strong>: The App Router is a new routing system in Next.js that enhances routing capabilities with features like server components and nested layouts. However, Atlas currently supports On-Demand ISR only in the context of the traditional Pages Router. This means that methods like&nbsp;<code>revalidatePath<\/code>&nbsp;and&nbsp;<code>revalidateTag<\/code>, which are used for revalidation in the App Router, are not compatible with the headless WP platform&#8217;s ISR mechanism. For more details on the App Router and its data fetching methods, you can refer to the Next.js documentation&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/fetching-caching-and-revalidating\">here<\/a>.<\/li>\n\n\n\n<li><strong>Rewrites are not supported<\/strong>: Rewrites in Next.js allow you to change the destination URL of a request without altering the URL visible to the user. However, On-Demand ISR on the headless WP platform does not support rewrites. This means that if your Next.js application relies on rewrites, the On-Demand ISR feature might not function as expected. You can learn more about rewrites&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/next-config-js\/rewrites\">here<\/a>.<\/li>\n\n\n\n<li><strong>Not compatible with Next.js I18N<\/strong>: Since Next.js uses rewrites for internationalization, this feature is not supported on the headless WP platform due to the rewrite limitation mentioned above.<\/li>\n\n\n\n<li><strong>Next.js &gt;=13.5 is required<\/strong>: To be able to use this feature, you need to update your application to Next.js version 13.5 or higher.<\/li>\n<\/ol>\n\n\n\n<p><strong>Note<\/strong>:&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/next-config-js\/redirects\">Redirects<\/a>&nbsp;(which, unlike rewrites, actually change the URL in the user\u2019s browser to the specified destination) are supported.<\/p>\n\n\n\n<p>If you want to give us feedback on how we can make things better for this feature or anything else with the platform, please visit our <a href=\"https:\/\/developers.wpengine.com\/docs\/atlas\/feedback\/\">feedback form<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Implementing On-Demand Incremental Static Regeneration (ISR) with Next.js and Faust.js on WP engine\u2019s headless WP platform is a game-changer for maintaining performance and up-to-date content in a headless WordPress setup. By following the steps outlined in this guide, you can leverage On-Demand ISR to ensure your site remains both fast and current, without the need for full rebuilds.&nbsp;<\/p>\n\n\n\n<p>The integration with the platform also simplifies the deployment and management process, providing a seamless workflow from development to production.&nbsp;<\/p>\n\n\n\n<p> As always, we look forward to hearing your feedback, thoughts, and projects so hit us up in our headless&nbsp;<a href=\"https:\/\/discord.com\/invite\/headless-wordpress-836253505944813629\">Discord<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WP engine\u2019s headless WordPress hosting platform is the go-to end-to-end solution for the headless approach. In this article, I will discuss and guide you through the easy implementation of the [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-31676","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>On-Demand ISR Support for Next.js\/Faust.js on WP Engine\u2019s Headless Platform - Builders<\/title>\n<meta name=\"description\" content=\"On-Demand ISR is now supported in your headless WordPress setup with Next.js and Faust.js on WP engine. Learn how to ensure your content is fresh and revalidated on-demand with our in-depth guide on how to set it all up.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"On-Demand ISR with Next.js &amp; Faust.js on WP Engine\u2019s Headless WordPress Platform\" \/>\n<meta property=\"og:description\" content=\"On-Demand ISR is now supported in your headless WordPress setup with Next.js and Faust.js on WP engine. Learn how to ensure your content is fresh and revalidated on-demand with our in-depth guide on how to set it all up.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-12T13:19:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-31T21:04:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/WPE-Builders-YouTube-ScreenshotNavy-1920x1080@2x-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3796\" \/>\n\t<meta property=\"og:image:height\" content=\"2136\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Francis Agulto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francis Agulto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/\"},\"author\":{\"name\":\"Francis Agulto\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/bcdcb4ac0b215c34b6b30e440a24dc54\"},\"headline\":\"On-Demand ISR Support for Next.js\\\/Faust.js on WP Engine\u2019s Headless Platform\",\"datePublished\":\"2024-08-12T13:19:12+00:00\",\"dateModified\":\"2025-03-31T21:04:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/\"},\"wordCount\":1991,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/ODISR.gif\",\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/\",\"name\":\"On-Demand ISR Support for Next.js\\\/Faust.js on WP Engine\u2019s Headless Platform - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/ODISR.gif\",\"datePublished\":\"2024-08-12T13:19:12+00:00\",\"dateModified\":\"2025-03-31T21:04:48+00:00\",\"description\":\"On-Demand ISR is now supported in your headless WordPress setup with Next.js and Faust.js on WP engine. Learn how to ensure your content is fresh and revalidated on-demand with our in-depth guide on how to set it all up.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/ODISR.gif\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/ODISR.gif\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"On-Demand ISR Support for Next.js\\\/Faust.js on WP Engine\u2019s Headless Platform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/bcdcb4ac0b215c34b6b30e440a24dc54\",\"name\":\"Francis Agulto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"caption\":\"Francis Agulto\"},\"description\":\"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"On-Demand ISR Support for Next.js\/Faust.js on WP Engine\u2019s Headless Platform - Builders","description":"On-Demand ISR is now supported in your headless WordPress setup with Next.js and Faust.js on WP engine. Learn how to ensure your content is fresh and revalidated on-demand with our in-depth guide on how to set it all up.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/","og_locale":"en_US","og_type":"article","og_title":"On-Demand ISR with Next.js & Faust.js on WP Engine\u2019s Headless WordPress Platform","og_description":"On-Demand ISR is now supported in your headless WordPress setup with Next.js and Faust.js on WP engine. Learn how to ensure your content is fresh and revalidated on-demand with our in-depth guide on how to set it all up.","og_url":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/","og_site_name":"Builders","article_published_time":"2024-08-12T13:19:12+00:00","article_modified_time":"2025-03-31T21:04:48+00:00","og_image":[{"width":3796,"height":2136,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/WPE-Builders-YouTube-ScreenshotNavy-1920x1080@2x-2.png","type":"image\/png"}],"author":"Francis Agulto","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Francis Agulto","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/"},"author":{"name":"Francis Agulto","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54"},"headline":"On-Demand ISR Support for Next.js\/Faust.js on WP Engine\u2019s Headless Platform","datePublished":"2024-08-12T13:19:12+00:00","dateModified":"2025-03-31T21:04:48+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/"},"wordCount":1991,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/ODISR.gif","articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/","url":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/","name":"On-Demand ISR Support for Next.js\/Faust.js on WP Engine\u2019s Headless Platform - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/ODISR.gif","datePublished":"2024-08-12T13:19:12+00:00","dateModified":"2025-03-31T21:04:48+00:00","description":"On-Demand ISR is now supported in your headless WordPress setup with Next.js and Faust.js on WP engine. Learn how to ensure your content is fresh and revalidated on-demand with our in-depth guide on how to set it all up.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/ODISR.gif","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/08\/ODISR.gif","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/on-demand-isr-support-for-next-js-faust-js-on-wp-engines-headless-platform\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"On-Demand ISR Support for Next.js\/Faust.js on WP Engine\u2019s Headless Platform"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54","name":"Francis Agulto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","caption":"Francis Agulto"},"description":"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!","url":"https:\/\/wpengine.com\/builders\/author\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31676"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31676\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}