How to apply SSR in Vue.js project without Nuxt?🔥

Hello everyone! In this article we will consider one of the main problems that you can solve without using Nuxt.js as the main framework - applying the SSR (Server-side Rendering) method to your Vue.js application.

It is worth considering that this method uses SSR without indexing by robots, but retains all other benefits.

🔗 Connecting a third-party library

You can connect a library called HMPL-js. This is a compiler of the corresponding template language, which extends the capabilities of ordinary HTML. By passing only a string to the parameters of the compile function, you can get a ready-made DOM element that will fit into the interface of your application. Let's see how it looks:

<template>
  <div ref="hmplContainer">
    <!-- clicker here -->
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import hmpl from "hmpl-js";

export default {
  setup() {
    const hmplContainer = ref(null);

    onMounted(() => {
      const templateFn = hmpl.compile(
        `<div>
          <button data-action="increment" id="btn">Click!</button>
          <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
        </div>`
      );

      const clicker = templateFn(({ request: { event } }) => ({
        body: JSON.stringify({ action: event.target.getAttribute("data-action") })
      })).response;

      hmplContainer.value.appendChild(clicker);
    });

    return { hmplContainer };
  }
};
</script>

Here, when mounting the application, we insert a ready-made element that will be updated every time we click on the button. Moreover, the click count will occur on the server, and we will only send custom requests there.

💎 Checkout HMPL-js ★

And this is another simple example, we can remove the after property and use it simply as a load on mount. This is how it will look:

<template>
  <div ref="hmplContainer">
    <!-- header here -->
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import hmpl from "hmpl-js";

export default {
  setup() {
    const hmplContainer = ref(null);

    onMounted(() => {
      const templateFn = hmpl.compile(
        `<div>
          {{ src: "/api/header" }}
        </div>`
      );

      const header = templateFn().response;
      hmplContainer.value.appendChild(header);
    });

    return { hmplContainer };
  }
};
</script>

Thus, with a regular component we immediately receive our DOM element from the server without adding an additional event. From such blocks, you can create the entire page that will use the SSR method.

👀 Integration with older versions of Vue

Moreover, this method works great for older versions of Vue. That is, you won’t have to update to version 3 or later (depending on when you read this), but using Nuxt.js, especially a newer version, you will have to do this. How can you do it in an older version:

<template>
  <div ref="hmplContainer">
    <!-- header here -->
  </div>
</template>

<script>
import Vue from "vue";
import hmpl from "hmpl-js";

export default Vue.extend({
  data() {
    return {
      hmplContainer: null
    };
  },
  mounted() {
    this.hmplContainer = this.$refs.hmplContainer;
    ...
  }
});
</script>

Here, instead of the onMounted hook, we will use the regular mounted in the object, and also slightly change the ref. In general, nothing significant will change, but such functionality will be quite relevant.

✅ Conclusion

This method will allow you to use SSR regardless of the version of your Vue application. Also, it does not force you to adhere to strict framework boundaries, you can combine this method with other libraries without losing interactivity and code readability, and in general without really redoing anything.

I hope this method will help you make your website smaller in size, thus loading faster for the client.

You can follow the author on Twitter!

Thank you all very much for reading the article ❤️!