Server-Only Components & process.server

The opposite of <ClientOnly> is the server-only component — content rendered on the server, delivered as HTML, and never hydrated on the client. The result is smaller JS bundles and faster pages.

The .server.vue Suffix

Name a component file with .server.vue and Nuxt treats it as server-only:

<!-- components/MyArticle.server.vue -->
<script setup lang="ts">
const { data: article } = await useFetch('/api/article')
</script>

<template>
  <article>
    <h1>{{ article?.title }}</h1>
    <div v-html="article?.html" />
  </article>
</template>

Use it in any page just like a regular component — Nuxt renders it on the server and ships only the resulting HTML; none of this component’s code lands in the client bundle.

NuxtIsland for Explicit Islands

When you need to render a server component dynamically (e.g. with refreshable content), use <NuxtIsland>:

<template>
  <NuxtIsland name="MyArticle" :props="{ slug: 'hello' }" />
</template>

Nuxt fetches the rendered HTML for that island and swaps it in. You can refresh islands without a full page reload — great for dynamic-but-static-feeling chunks of content.

process.server vs process.client

Inside any script, branch on the environment:

if (process.server) {
  // Runs only during SSR — safe to use Node APIs, env vars, secrets.
  console.log('Server start, secret:', process.env.SECRET_KEY)
}

if (process.client) {
  // Runs only in the browser — safe to use window, localStorage, etc.
  console.log('Hydrated in client')
}

These booleans are inlined at build time, so dead-code elimination strips the wrong-side branch from the produced bundles.

When to Reach For Server-Only

• Markdown-rendered articles with no interactivity.
• Heavy third-party rendering (e.g. syntax highlighting) you do not want in the client bundle.
• Static dashboards reflecting current server state with no user input.

This is the start of an “islands architecture” for Nuxt — sprinkle interactive components into mostly-static server-rendered pages.