Как делать кеширование Nuxt SSR для смартфонов и ПК?

Question

[Stan_1]

Помогите, плз, не могу сообразить. Начал делать проект на Nuxt/Vue (заодно хочу изучить). Прикрутил vue-mq, который позволяет формировать разные представления для мобильных устройств и ПК. Но при загрузке сайта, сначала генерируется что-то среднее, неудобоворимое, и только потом, сайт резко перестраивается в соответствии с логикой верстки на конкретном экране.

Существует ли какая-то механика, позволяющая иметь на стороне Server-side кешированные версии для разных устройств и отдавать их? Не могу понять, какой тут есть Best way. :(

Answer 1

[WinPooh32]

Если страница перерисовывается скриптами в зависимости от устройства, то вы не сможете закешировать рендер, это работает только когда у вас страница формируется с помощью css стилей.

Как вариант решения - использовать разные роуты под разные представления.

Comments

[Stan_1]

Ну собственно, так и сделал. Только не через роуты, а через layouts. Поставил device-detect, на его основе через плагин ввел переменную $mq, которая может принимать три значения: mobile, tablet, desktop.

// ~plugins/mq.js
export default async function (ctx, inject) {
  let mq = '';

  switch (true) {
    case ctx.isMobile:
      mq = 'mobile';
      break;

    case ctx.isTablet:
      mq = 'tablet';
      break;

    default:
      mq = 'desktop';
  }

  // Инжектируем название класса в context и app
  ctx.mq = mq;
  inject('mq', mq);
}

Затем, определил ~/pages/index.vue, в котором указал:

<script>

  export default {
    layout: function(ctx) {
      // ctx.mq может принимать три значения: mobile, desktop, tablet
      // См. ~plugins/mq-plugin
      return ctx.mq + '/default';
    }
  }
</script>

Вот это вроде работает как ожидалось :) С подводными камнями пока не столкнулся.

[WinPooh32]

Stan_1, ваше решение скорее всего не будет работать, если кешировать через, например, nginx.

[Stan_1]

Оно базируется на анализе user-agent браузера на серверной стороне, и генерации соответствующего layout. поэтому, по идее, будет. Но практически не проверял.