danielroe / nuxt-vercel-isr Goto Github PK

View Code? Open in Web Editor NEW

150.0 2.0 20.0 566 KB

A tiny demo to show off Nuxt's route rules integration with Vercel.

Home Page: https://nuxt-vercel-isr.vercel.app

Vue 95.34% TypeScript 4.66%

nuxt isg isr ssg static vercel

nuxt-vercel-isr's Introduction

Nuxt ❤️ Vercel

This is a tiny demo to show off Nuxt's route rules integration with Vercel.

Here are a few different pages to try:

/ - revalidated every 60 seconds, in the background
/static - generated on demand and then cached permanently
/prerendered - generated at build time and cached permanently
/dynamic - always fresh

The only config required:

export default defineNuxtConfig({
  routeRules: {
    // all routes (by default) will be revalidated every 60 seconds, in the background
    '/**': { isr: 60 },
    // this page will be generated on demand and then cached permanently
    '/static': { isr: true },
    // this page is generated at build time and cached permanently
    '/prerendered': { prerender: true },
    // this page will be always fresh
    '/dynamic': { isr: false },
    // you can do lots more with route rules too!
    '/redirect': { redirect: '/static' },
    '/headers': { headers: { 'x-magic-of': 'nuxt and vercel' } },
    '/spa': { ssr: false },
  },
})

Setup

Enable corepack:

npx corepack enable

Make sure to install the dependencies:

pnpm install

Credits

This was based on nuxt-on-the-edge by @pi0 which itself was inspired by other projects.

Development

Start the development server on http://localhost:3000

pnpm dev

Production

The easiest way to deploy your app is to link the repo to your Vercel account. Alternatively, you can create a production build locally using pnpm build.

Checkout the deployment documentation for more information.

nuxt-vercel-isr's People

Contributors

Stargazers

Watchers

nuxt-vercel-isr's Issues

Is On-Demand ISR Supported For Nuxt + Vercel?

I am looking to implement something like the Next.js example here but I am not finding any documentation on how to do on-demand revalidation without the Next.js framework. Is this mode supported for Nuxt on Vercel?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

chore(deps): update dependency nitropack to v2.9.7
chore(deps): update dependency vue-router to v4.4.3
chore(deps): update nuxt core (nuxt, vue)
chore(deps): lock file maintenance

Detected dependencies

npm

package.json

ms ^2.1.3

nitropack ^2.8.1

nuxt ^3.10.1

vue ^3.4.19

vue-router ^4.2.5

@types/ms 0.7.34

Check this box to trigger a request for Renovate to run again on this repository

Does this work with Netlify?

I'm wondering if Netlify has caught up to Vercel regarding ISR?

Cloudflare hybrid rendering support

Hey, thanks for all the cool work you guys are releasing!!!!

Is it correctly understood that hybrid rendering is currently not possible using Cloudflare (instead of Netlify or Vercel)?
I have looked everywhere online and can't find any examples.

I hope you can help with a quick answer.

isr mode conflicting with island component

When you have an island component that accepts some props:

// Test.server.vue
<script lang="ts" setup>
defineProps<{
  data: string;
}>();
</script>

<template>
  <div>
    <div>test island</div>
    <div>{{ data }}</div>
  </div>
</template>

And use it like

// index.vue
<template>
  <div>
    <Test data="world" />
  </div>
</template>

Locally it works fine, which produces:

<div>
  <div>test island</div>
  <div>world</div>
</div>

But when you have routeRules set to

'/**': { isr: 60 },

and deploy it to Vercel. Going to a page without this component first then navigate to that page, which triggers a XHR call to fetch the server component payload, the prop is undefined and you get

<div>
  <div>test island</div>
  <div></div>
</div>

Since this is related to isr mode (skipping isr setting entirely does work fine on vercel), should we include another setting here to bypass it?

routeRules: {
  '/__nuxt_island**: {isr: false}
  '/**': { isr: 60 },
}