Vue + Go: делаем фронтовые острова на беке

Предлагаю вашему вниманию собственный велосипед (SSR) на go и vue. Я пишу эту статью, потому что, когда я искал подобную информацию, то ничего не нашел. Наверное, и хорошо: лучше так не писать, но мы же должны познать плохие практики, чтобы понимать, где добро, а где зло !)

Именно таким образом и родился учебный проект https://gitlab.com/pnym/sync-go-vue: на Go рендерится HTML, а Vue оживляет только опредленные кусочки.

Договор

Паттерн у меня опирается на соглашение. Сервер у себя рендерит HTML в таком формате:

<div data-island="Counter" data-props='{"initial":0,"step":1}'></div>

Все просто, два атрибута:

• data-island - название vue компонента

• data-props - tего props, сериализованные в JSON

Это весь контракт между бэком и фронтом. На фронте тем временем скрипт находит div от бэка, изучает их, при необходимости подгружает компонент и монтирует его внутрь контейнера.

Сторона Go

Бек - это по своей сути chi, html/template и совсем немного строк рендера. В шаблонах вызывается функция island, с помощью которой и собирает нужный контейнер:

tmpl, err := template.New("").Funcs(template.FuncMap{
    "island": island,
}).ParseFS(templatesFS, "*.tmpl")

и вот сам island:

func island(name string, props ...any) template.HTML {
    data := map[string]any{}
    for i := 0; i < len(props); i += 2 {
        data[fmt.Sprint(props[i])] = props[i+1]
    }

    b, err := json.Marshal(data)
    if err != nil {
        panic(fmt.Sprintf("island %q: marshal props: %v", name, err))
    }

    return template.HTML(fmt.Sprintf(
        `<div data-island="%s" data-props="%s"></div>`,
        template.HTMLEscapeString(name),
        template.HTMLEscapeString(string(b)),
    ))
}

(Важный момент: если вы все же надумаете писать или копировать какое-то решение, то не забывайте про лазейку для XSS)

Пример в шаблоне:

{{ island "Counter" "initial" 0 "step" 1 }}

Имя компонента + затем пары "ключ - значение" ...

Сторона Vue

Самый главный кусоек:

import { createApp } from 'vue'

const components = import.meta.glob('./islands/*.vue')

document.querySelectorAll<HTMLElement>('[data-island]').forEach(async (el) => {
  const name = el.dataset.island!
  const loader = components[`./islands/${name}.vue`]

  if (!loader) {
    console.warn(`[sync-go-vue] component not found: ${name}`)
    return
  }

  let props: Record<string, unknown> = {}
  try {
    props = JSON.parse(el.dataset.props || '{}')
  } catch {
    console.error(`[sync-go-vue] invalid props for ${name}`)
    return
  }

  const mod = await loader() as { default: any }
  createApp(mod.default, props).mount(el)
})

import.meta.glob- важная строка. Vite смотрит на нее и создаёт схему (карту) "путь + ленивый импорт", каждый компонент такой собирается в отдельный чанк. Отдельно вести документацию не нужно: закинул файл "Example.vue" в папку и забыл. Еще один важный момент, имя в data-island должно совпадать с именем файла.

Самая приятная часть

Иногда при разработки "бек + Vite" возникает боль с двумя портами, cookies и cors. Я решил эту проблему простым способом: Vite сам работает реверс-прокси.

В vite.config.ts описано правило:

server: {
  proxy: {
    '^(?!/@|/src/|/node_modules/|/__vite)': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
},

Всё, что не относится к Vite, уходит на 8080. Это значит, что браузер видит один порт. Страницу отдаёт Go, а Vue-код идёт через HMR и обновляет .vue, и компонент обновляется без перезагрузки. Также в самих шаблонах Go я тоже добавил похожую логику, поэтому в конфиге Vite живёт маленький плагин, который следит за *.tmpl и присылает full-reload.

Перезапуск Go при обновление кода делает air. Таким образом оба сервера обновляются без перезагрузки. Запускается все одной командой:

make dev

Итог

Этот проект я создал побаловаться, спасибо, что дочитали. Хоть он и получился маленьким: один go файл с маршрутами, рендер на 40 строк, три компонента. Зато это работает и показывает настоящую механику паттерна:

• страница статична

• vue зоны размечены data-island / data-props

• клиент лениво монтирует компоненты

• данные приходят с сервера

Вы сами для себя решаете, нужно ли вам это делать, поддерживать и брать на себя все риски, которые будут обязательно. Ну или кому вы оставите после себя это наследие.