これの、my component 以下の部分が Server Component になっていて、テキスト入力をするたびにリクエストが飛んでいきます。
セットアップ
nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
+ experimental: {
+ componentIslands: true,
+ },
})
たったこれだけ！
実験的機能なので今のところ遊びでしか使えそうにないですね。
コード
pages/index.vue
<template>
<input type="text" v-model="text" />
<Test :text="text" />
</template>
<script setup lang="ts">
const text = ref('');
</script>
このページの、<Test /> が Server Component です。
components/test.server.vue
<template>
<div>{{ text }}</div>
<div v-html="html" />
</template>
<script setup lang="ts">
import MarkdownIt from 'markdown-it';
import { ref } from 'vue';
const props = defineProps<{
text: string;
}>();
const md = new MarkdownIt();
const string = `# my component
- markdown list
- rendered as html
- cool
- ` + props.text;
const html = md.render(string);
</script>
Server Component は .server.vue のようなファイル名にしてあげると勝手にサーバでレンダリングされるようになります。
おわり
components/test.server.vue
<template>
<div>{{ text }}</div>
<div v-html="html" />
</template>
👆 の、{{ text }} を外してみるとまともに動かなくなった。そういうもの？
難しかった。