☰  [ ![Vue
School](https://vueschool.io/img/logo/vueschool_logo_multicolor_negative.svg)
](/ "Go to VueSchool.io, home of Vue.js courses")

×

Courses

  * [ Video Courses ](/courses)
  * [ Vue.js Master Class 2024 Edition ](/the-vuejs-master-class-2024)
  * [ Vue.js Master Class ](/the-vuejs-master-class)
  * [ Workshops ](/workshops)
  * [ Mastering Nuxt ](https://masteringnuxt.com/?ref=vueschool)

[ Plans ](/plans)

Business Services

  * [ Vue.js Corporate Training ](/vue-corporate-training)
  * [ Workshops ](/workshops)
  * [ Hiring ](/hiring)

[ Learning Paths ](/learning-paths) [ Articles ](/articles)

Events

  * [ Frontend Nation ](https://frontendnation.com/)
  * [ Vue.js Nation ](https://vuejsnation.com/)
  * [ Nuxt Nation ](https://nuxtnation.com/)
  * [ Vue.js Forge ](https://vuejsforge.com/)

[ Get Certified
](https://certificates.dev/vuejs/?utm_source=vueschool_TLN&utm_medium=link&utm_campaign=vueschool.io_TLN_Link)
[ 40% OFFER  ](/sales/spring24)

* * *

[ Login ](/login) [ Create account ](/register)

×

[ ![Banner](/images/banners/static/NUXT_CERT_EB_LAUNCH/floating.png)
![Banner](/images/banners/static/NUXT_CERT_EB_LAUNCH/floating-mobile.png)
](https://certificates.dev/nuxt)

[ Home ](/) / [ Blog ](/articles) /  Lazy Hydration and Server Components in
Nuxt – Vue.js 3 Performance

Share:

[
](https://twitter.com/intent/tweet?text=Lazy%20Hydration%20and%20Server%20Components%20in%20Nuxt%20-%20Vue.js%203%20Performance%20-%20Vue%20School%20Articles&url=https://vueschool.io/articles/vuejs-
tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/)
[
](https://www.facebook.com/sharer/sharer.php?u=https://vueschool.io/articles/vuejs-
tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/)

[ ![Lazy Hydration and Server Components in Nuxt &#8211; Vue.js 3
Performance](https://blog.vueschool.io/wp-
content/uploads/2024/01/VS_Articles_Lazy-Hydration-and-Server-Components-in-
Nuxt-Vue.js-3-Performance1.png) ](/articles/vuejs-tutorials/lazy-hydration-
and-server-components-in-nuxt-vue-js-3-performance/)

#  Lazy Hydration and Server Components in Nuxt – Vue.js 3 Performance

[ ![Filip Rakowski](https://blog.vueschool.io/wp-
content/uploads/2023/12/Filip-Rakowski-Co-Founder-and-CTO-at-Vue-
Storefront-768x768-1-96x96.jpeg) Filip Rakowski  January 23rd 2024
](/articles/author/filip-rakowski)

###  Part of the series: [ Vue.js 3 Performance
](/articles/series/vue-3-performance)

  * [ 1\.  Lazy Hydration and Server Components in Nuxt – Vue.js 3 Performance  ](/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/) (This post) 
  * [ 2\.  Understanding and Measuring Nuxt Performance – Vue.js 3 Performance  ](/articles/vuejs-tutorials/understanding-and-measuring-nuxt-performance-vue-js-3-performance/)

This entry is part 2 of 2 in the series [ Vue.js 3 Performance
](https://blog.vueschool.io/series/vue-3-performance/ "Vue.js 3 Performance")

**In the previous article, I mentioned two main ways that allow new, custom
code to enter our Nuxt.js Application - components and plugins. Today, we will
learn everything about the former. For most Nuxt.js applications, components
are #1 contributor to the JavaScript bundle size. They’re not such a big deal
on their own, but they very often introduce heavy third-party code that brings
additional interactivity, like sliders or chart libraries.**

##  How does Hydration work in Nuxt.js?

Before we get into the details of optimizing components, we need to understand
how exactly they can decrease the performance of our applications. To get
there, we need to understand the process of hydration.

Hydration, in short, is a process of making static HTML of Server-Side
Rendered (or Statically Rendered) applications interactive.

You probably noticed that sometimes, when you click on the interactive element
of a Nuxt.js application right after it appears on the screen, nothing
happens. Nothing happens because when it ar