Nuxt Tip: Differentiate Client and Server Components
Client Components
By adding the .client suffix to a component you tell Nuxt to render that component only client-side.
1
| components/
2
--| MyComponent.client.vue
.client components are rendered only after being mounted. If you need to access the rendered template in onMounted() you need to call await nextTick() inside the onMounted() callback.
Alternatively, you can wrap your component with Nuxt's <ClientOnly> component:
1
<template>
2
<div>
3
<ClientOnly>
4
<MyComponent />
5
</ClientOnly>
6
</div>
7
</template>
Server Components
Server components are currently experimental. You can enable them in your Nuxt config:
1
export default defineNuxtConfig({
2
experimental: {
3
componentIslands: true,
4
},
5
})
By adding the .server suffix to a component you tell Nuxt to always render that component on the server. Such a component adds zero JavaScript to your client bundle and does not parse markdown in your client which makes your app faster. If you update its props, a network is triggered to update the HTML.
1
| components/
2
--| MyComponent.server.vue
LearnVue produced a good video about server components:
Combine Server and Client Components
You can either use .client and .server components on their own or pair them.
Combining them enables advanced use cases if your components need to have separate implementations on the client and server side.
1
| components/
2
--| MyComponent.client.vue
3
--| MyComponent.server.vue
Be aware that the client component needs to be able to hydrate the HTML which was generated by the server component to avoid hydration mismatches.
If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter: