DEV Community

loading...
Cover image for Incremental Static (Re)Generation with Nuxt.js and Layer0

Incremental Static (Re)Generation with Nuxt.js and Layer0

Rishi Raj Jain
Hey, I'm Rishi Raj Jain. I build products that delight customers through a blend of frontend engineering and visual design.
Originally published at layer0.co Updated on ・2 min read

What is Incremental Static (Re)Generation?

For understanding Incremental Static Generation, let the explanation be guided by a scenario where a page requested by the user was not pre-rendered while statically exporting the website. In such a case, a fallback page is served while the data loads. Further, upon completion of building the page with the fetched data, the page is then cached onto the server. Any user requesting the page then would skip over the fallback and loading stages, and directly see the built page. Superb!

Regeneration is inspired by the concept of stale-while-revalidate, where stale data is refreshed at regular intervals of 'revalidate' seconds. For pages that have staleWhileRevalidateSeconds value configured, they would be re-built after regular intervals of the configured value.

Refer to the detailed guides on ISR at: Incremental Static Regeneration: Its Benefits and Its Flaws and A Complete Guide To Incremental Static Regeneration (ISR) With Next.js

Getting started with ISR in Nuxt.js with Layer0

To configure Nuxt.js apps to have IS(R)G follow the steps below:
Create a nuxt app by the following command:
npm create nuxt-app <project-name>

  • For Choose custom server framework select None
  • For Choose rendering mode select Universal (SSR)
    In case you already have a nuxt app, just maintain the above configurations and would be good to go.

  • Add the Layer0 CLI via:
    npm i -g @layer0/cli

  • In nuxt.config.js, add "@layer0/nuxt/module" to buildModules:

module.exports = {
  buildModules: [
    [
      '@layer0/nuxt/module', 
      { 
        layer0SourceMaps: true       
      }
    ]
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • Run layer0 init

  • For IS(R)G, use routes.js (Created automatically by layer0 init command) and add route for the dynamic pages /some-route/_slug.vue as following:

  • To test locally how the app would do in production, run the following:
    layer0 build && layer0 run --production

  • To deploy run: layer0 deploy

  • Celebrate! 🎉

Example Of Incremental Static Regeneration with Layer0

With Layer0, it's easier than ever to implement Incremental Static Regeneration for different purposes with different frameworks. The following seeks to implement ISR with Nuxt.js via Layer0. 
image
GitHub: https://github.com/rishi-raj-jain/static-medium-isr-in-nuxtjs-with-layer0
Website: Static Medium

Damn! It got featured #1 on BuiltWithTailwind!

image
Showcase Link: https://builtwithtailwind.com/site/static-medium-isr-in-nuxtjs-with-layer0

Discussion (0)