Hydration Process in Vue.js: Reconnecting Client-Side State

Introduction

The hydration process is a critical step in Server-Side Rendering (SSR) that ensures the Vue.js application becomes fully interactive on the client side. After the server sends the pre-rendered HTML to the client, Vue.js takes over and "hydrates" the application by attaching event listeners and synchronizing the client-side state. This article explores the hydration process in Vue.js, providing detailed explanations and examples.

Understanding Hydration in SSR

Hydration is the process of attaching client-side JavaScript to the server-rendered HTML, making the application interactive. During hydration, Vue.js reuses the existing HTML markup and adds event listeners, ensuring that the application state on the client matches the initial state on the server.

How Hydration Works

• Initial Render: The server renders the HTML and sends it to the client.
• Client-Side JavaScript: The client downloads and executes the Vue.js application code.
• Hydration: Vue.js attaches event listeners and synchronizes the client-side state with the server-rendered HTML.
• Interactivity: The application becomes fully interactive, with client-side updates taking over from the server-rendered content.

Setting Up SSR with Vue 3

To understand the hydration process, it's important to set up SSR with Vue 3. This involves creating a server, configuring the Vue application, and handling data pre-fetching.

Example: Creating a Server

// server.js
const express = require('express');
const { createBundleRenderer } = require('@vue/server-renderer');
const { createApp } = require('./src/main.js');
const server = express();

server.get('*', (req, res) => {
  const app = createApp();
  const renderer = createBundleRenderer(app, {
    template: require('fs').readFileSync('./index.template.html', 'utf-8')
  });

  renderer.renderToString((err, html) => {
    if (err) {
      return res.status(500).end('Internal Server Error');
    }
    res.end(html);
  });
});

server.listen(8080, () => {
  console.log('Server running at http://localhost:8080');
});

Explanation

In the example above, an Express server is set up to handle SSR. The `createBundleRenderer` function from `@vue/server-renderer` is used to render the Vue application to a string, which is then sent to the client as a fully rendered HTML page.

Configuring the Vue Application for SSR

Configure the Vue application to work with SSR by creating a server entry point and modifying the client entry point. This ensures that both server-side and client-side rendering are properly set up.

Example: Creating Server and Client Entry Points

// src/main.js
import { createSSRApp } from 'vue';
import App from './App.vue';

export function createApp() {
  const app = createSSRApp(App);
  return { app };
}

// src/entry-client.js
import { createApp } from './main';

const { app } = createApp();

app.$mount('#app');

// src/entry-server.js
import { createApp } from './main';

export default function (context) {
  const { app } = createApp();
  return app;
}

Explanation

In the example above, separate entry points for the server and client are created. The `main.js` file exports a function to create the Vue app, while the `entry-client.js` and `entry-server.js` files handle the client-side and server-side entry points, respectively.

Data Pre-fetching for Hydration

To ensure the necessary data is available both on the server and the client, handle data pre-fetching. This involves fetching data on the server and embedding it into the HTML sent to the client.

Example: Fetching Data on the Server

// src/store.js
import { createStore } from 'vuex';

export function createStore() {
  return createStore({
    state: {
      items: []
    },
    actions: {
      fetchItems({ commit }) {
        return fetch('/api/items')
          .then(response => response.json())
          .then(items => {
            commit('setItems', items);
          });
      }
    },
    mutations: {
      setItems(state, items) {
        state.items = items;
      }
    }
  });
}

// src/entry-server.js
import { createApp } from './main';

export default function (context) {
  const { app, store } = createApp();

  return store.dispatch('fetchItems').then(() => {
    context.state = store.state;
    return app;
  });
}

Example: Embedding Initial State in HTML

// server.js (continued)
server.get('*', (req, res) => {
  const app = createApp();
  const renderer = createBundleRenderer(app, {
    template: require('fs').readFileSync('./index.template.html', 'utf-8')
  });

  renderer.renderToString({ url: req.url }).then((html) => {
    res.send(`
      <!DOCTYPE html>
      <html>
      <head>
        <title>My Vue SSR App</title>
      </head>
      <body>
        <div id="app">${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(context.state)}
        </script>
      </body>
      </html>
    `);
  }).catch((err) => {
    res.status(500).end('Internal Server Error');
  });
});

Explanation

In the examples above, data is fetched on the server using Vuex actions and mutations. The initial state of the application is then embedded in the HTML sent to the client using a script tag. This allows the client-side application to hydrate with the pre-fetched data, ensuring that the state is consistent between the server and the client.

Hydrating the Client-Side Application

After the server sends the rendered HTML to the client, Vue.js needs to "hydrate" the client-side application by attaching event listeners and making the application interactive. This process is called client-side hydration.

Example: Client-Side Hydration

// src/entry-client.js
import { createApp } from './main';

const { app, store } = createApp();

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

app.mount('#app');

Explanation

In the example above, the client-side entry point initializes the Vue.js application and mounts it to the DOM. The `__INITIAL_STATE__` embedded in the HTML from the server is used to replace the client-side store's state, ensuring that the application hydrates with the pre-fetched data.

Handling Client-Side Interactions

After the hydration process is complete, the Vue.js application is fully interactive. It's essential to handle client-side interactions efficiently to maintain a seamless user experience.

Example: Adding Event Listeners

// src/App.vue
<template>
  <div>
    <button @click="handleClick">Click Me</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!"
    };
  },
  methods: {
    handleClick() {
      this.message = "Button Clicked!";
    }
  }
};
</script>

Explanation

In the example above, event listeners are added to handle client-side interactions. When the button is clicked, the message is updated, demonstrating that the Vue.js application is fully interactive after the hydration process.

Fun Facts and Little-Known Insights

• Fun Fact: The hydration process in Vue.js ensures that the application state is consistent between the server and the client, providing a seamless user experience.
• Insight: Hydration reduces the amount of JavaScript that needs to be executed on the client side, improving performance on low-end devices and slow networks.
• Secret: By leveraging SSR and hydration, you can significantly improve the SEO and user experience of your web applications, making them more accessible and performant.

Conclusion

The hydration process in Vue.js is a critical step in ensuring that server-rendered applications become fully interactive on the client side. By understanding and implementing hydration, you can provide a seamless user experience, improve performance, and enhance the SEO of your web applications. The active and supportive Vue.js community, combined with comprehensive documentation, ensures that you have all the resources needed to succeed in modern web development.