Vue.js pour SSR : retour d'expérience

Le Server-Side Rendering (SSR) est devenu un élément crucial dans le développement d'applications web modernes, particulièrement pour optimiser les performances et le référencement. Vue.js, avec son approche progressive et sa flexibilité, offre une solution robuste pour implémenter le SSR. Dans cet article, je partage mon retour d'expérience sur l'utilisation de Vue.js pour le SSR dans un contexte .NET, en mettant l'accent sur les aspects pratiques et les défis rencontrés.

Les fondamentaux du SSR avec Vue.js

Le Server-Side Rendering avec Vue.js consiste à générer le HTML côté serveur avant de l'envoyer au client. Cette approche présente plusieurs avantages :

• Meilleure performance perçue au premier chargement
• SEO optimisé grâce au contenu directement accessible aux crawlers
• Expérience utilisateur améliorée sur les connexions lentes

Configuration de base

// server.js
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = new Vue({
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </div>
  `,
  data: {
    title: 'Vue SSR Demo',
    content: 'Contenu rendu côté serveur'
  }
})

Intégration avec ASP.NET Core

L'intégration de Vue.js SSR dans une application ASP.NET Core nécessite quelques configurations spécifiques :

// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
    services.AddNodeServices();
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
}

// VueController.cs
public class VueController : Controller
{
    private readonly INodeServices _nodeServices;
    public VueController(INodeServices nodeServices)
    {
        _nodeServices = nodeServices;
    }
    public async Task<IActionResult> Index()
    {
        var result = await _nodeServices.InvokeAsync<string>(
            "ClientApp/server",
            Request.Path
        );
        return Content(result, "text/html");
    }
}

Gestion de l'état et hydratation

Un des aspects cruciaux du SSR est la gestion de l'état et son hydratation côté client :

// store.js
export const store = new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    setItems(state, items) {
      state.items = items;
    }
  },
  actions: {
    async fetchItems({ commit }) {
      const response = await fetch('/api/items');
      const items = await response.json();
      commit('setItems', items);
    }
  }
})

Optimisation des performances

Pour optimiser les performances du SSR, plusieurs techniques peuvent être mises en place :

• Mise en cache du rendu côté serveur
• Streaming du HTML
• Chargement différé des composants

// cache.js
const LRU = require('lru-cache')
const cache = new LRU({
  max: 1000,
  maxAge: 1000  60  15 // 15 minutes
})

function renderWithCache(component, context) {
  const key = context.url
  const cached = cache.get(key)
  if (cached) {
    return cached
  }
  const html = renderer.renderToString(component)
  cache.set(key, html)
  return html
}

// test.js
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('renders server-side correctly', () => {
    const wrapper = shallowMount(MyComponent)
    expect(wrapper.text()).toMatch('Expected content')
  })
})