Size: a a a

Nuxt.js | Vue SSR

2021 March 21

АН

Андрей Назаров... in Nuxt.js | Vue SSR
Illia Sakovich
Добрый день!
Имеется Nuxt приложение, деплоится через Netlify, использую nuxtServerInit для подгрузки данных, которые меняются (корзина, количество товара в наличии), на локалке все нормально, подгружается актуальная корзина и отдаётся сгенерированная HTMLка
Однако при деплое, как я понял, Nuxt генерит все страницы и отдаёт их с сервера закэшированными, в результате чего отдаётся то состояние корзины, которое было при деплое, когда страница сгенерилась
С Nuxt работаю не так давно, допускаю что делаю что-то вне соотвествии с идеологией Nuxt

Какие решения я вижу:
- заставить Nuxt постоянно генерить новую ХТМЛку (а не постоянно отдавать предварительно сгенерированную)
- получать динамические данные на фронте, но такой вариант не хотелось бы, хочется чтобы с сервера прилетала уже готовая ХТМЛка с правильным состоянием для текущего пользователя

Подскажите пожалуйста, является ли нормальным какое-то из этих решений? Если нет, то что посоветуете?
ssr если хотите все и сразу
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
RusaXXX
А можно подробнее про подход вынести логику со страниц в сервисы?
Допустим у тебя есть page файл. В нем есть:

async asyncData(ctx) {
   const data = await ctx.api.get(‘some urr’);
  ………………
  some logic
   const otherData = await ctx.api.get()
  ……..
  more other logic
}


Вместо этого можно сделать файл
my-page-logic.js
export default const pageHomeInit = async (api) => {

const data = await api.get(‘some urr’);
  ………………
  some logic
   const otherData = await api.get()
  ……..
  more other logic

 return {
    …some object
 }

}

В page тогда будет что-то вроде

import pageHomeInit form ‘my-page-logic’
async asyncData(ctx) {
 
  const data = await pageHomeInit(ctx.api);
  return data;
}
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
Теперь можно тестировать pageHomeInit как обычную функцию
а саму страницу нет смысла тестиоватьб так как там только логика которая относится к фреймворку
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
Если на странице есть какая-либо другая логика, которая не касается ssr то можно вынести в отдельный компонент.
Тоесть ваш page файл будет ответсвеннен только за загрузку данных и предеачу их в пропсы.
<template>
<home-component
  ….some props
/>
</template>
по сути это тот же принцип контейнеров и тупых компонентов.

Но опять же получается больше бойлерплейта.
Плюс сейчас есть новый фетчб поэтому было бы неплохо иметь нормальный способо тестировать специфичную только для nuxt логику
источник

АБ

Алексей Дмитриевич Б... in Nuxt.js | Vue SSR
Maxim Kostenko
Допустим у тебя есть page файл. В нем есть:

async asyncData(ctx) {
   const data = await ctx.api.get(‘some urr’);
  ………………
  some logic
   const otherData = await ctx.api.get()
  ……..
  more other logic
}


Вместо этого можно сделать файл
my-page-logic.js
export default const pageHomeInit = async (api) => {

const data = await api.get(‘some urr’);
  ………………
  some logic
   const otherData = await api.get()
  ……..
  more other logic

 return {
    …some object
 }

}

В page тогда будет что-то вроде

import pageHomeInit form ‘my-page-logic’
async asyncData(ctx) {
 
  const data = await pageHomeInit(ctx.api);
  return data;
}
Дай человеку подсказку: функциональный стиль программирования, чистые функции, инкапсуляция, изоляция, модульность)
источник

S

Sonic [Скупаю | Акту... in Nuxt.js | Vue SSR
Maxim Kostenko
Теперь можно тестировать pageHomeInit как обычную функцию
а саму страницу нет смысла тестиоватьб так как там только логика которая относится к фреймворку
Ошибки гидрации не отлавливаешь? Я о аргументе "саму страницу нет смысла тестировать". Уточню, гидрацию в ходе продакшена.
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
Я про юнит тесты
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
Даже не знаю реально ли отлавливать ошибки гидрации не вручную
источник

А

Александр in Nuxt.js | Vue SSR
Народ, подскажите.
Нукстовский prefetch не дёргает fetch(), а можно как-то его заставить это сделать и префетчить уже готовую страницу
источник

АН

Андрей Назаров... in Nuxt.js | Vue SSR
Александр
Народ, подскажите.
Нукстовский prefetch не дёргает fetch(), а можно как-то его заставить это сделать и префетчить уже готовую страницу
Нэт
источник

А

Александр in Nuxt.js | Vue SSR
Спс
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
это слишком опасноб чтобы быть из кокробки
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
Но можно ж самому зафорсить префетч
источник

А

Александр in Nuxt.js | Vue SSR
как наиболее просто это сделать?
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
как-то так:
<link rel="prefetch” href="/api/config" as="fetch">
источник

А

Александр in Nuxt.js | Vue SSR
не понял куда это вставлять и что этот тег делает
источник

MK

Maxim Kostenko in Nuxt.js | Vue SSR
если добавить этот тэг в html -> head то данные по url из href будут загружены и закешированны.

тоже самое можно сделать через http заголовки. Как это добавить и когда - это уже другой вопрос
источник

MA

Maxim Anisimov in Nuxt.js | Vue SSR
D
Привет. А есть какие-то доки по тестированию Nuxt? Не понимаю как подступиться
А что именно Вы хотите тестировать?
источник

D

D in Nuxt.js | Vue SSR
Maxim Anisimov
А что именно Вы хотите тестировать?
хороший вопрос)
но, например, сейчас конкретно хочу проверить, во-первых, чтобы после доступа к закрытой странице редиректил на логин (мидлварь модуля nuxt/auth), во-вторых чтоб после логина редиректил не домой, а на ту закрытую страницу
источник

А

Александр in Nuxt.js | Vue SSR
Maxim Kostenko
если добавить этот тэг в html -> head то данные по url из href будут загружены и закешированны.

тоже самое можно сделать через http заголовки. Как это добавить и когда - это уже другой вопрос
я немного про другое
у нукста есть префетч
https://ru.nuxtjs.org/blog/introducing-smart-prefetching/
т.е. ссылка попадает в область видимости, автоматом префетчится js нужного бандла новой страницы, а хотелось его ещё заставить префетчить не только бандл, но и данные которые в хуке fetch()
источник