danielroe / nuxt-vercel-isr

A tiny demo to show off Nuxt's route rules integration with Vercel.
https://nuxt-vercel-isr.vercel.app
157 stars 22 forks source link

isr mode conflicting with island component #3

Open zipme opened 1 year ago

zipme commented 1 year ago

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 },
}