Nuxt で Server Component やってみた

これの、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 }} を外してみるとまともに動かなくなった。そういうもの？
難しかった。