ЧПУ, Nuxtjs, как реализовать?

Question

[Игорь]

Коллеги, приветствую.

Nuxtjs
SSR

Хочу реализовать ЧПУ на сайте.

Схема:

1 (http://domain.ru/voronez)
2 (http://domain.ru/voronez/avtoservis)
3 (http://domain.ru/voronez/avtoservis/diagnostica)

Данные загружаются по API

Предварительно создал следующие маршруты

export function createRouter() {
  const router = new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: Index
      },
      {
        name: 'organizations_city',
        path: '/:city',
        component: Organizations,
        props: true,
        beforeEnter: (to, from, next) => {
          next()
        }
      },
      {
        name: 'organizations_city_category',
        path: '/:city/:category',
        component: Organizations,
        beforeEnter: (to, from, next) => {
          next()
        }
      }
    ]
  })

Если перейти по domain.ru/voronez то каким образом я загружу организации, если мне нужно в параметры API передавать числовые значения.

Заказчик топает ножками, мол url domain.ru/organizations?city_id=4324 не котирует.
Нужно domain.ru/voronez.

Вариантов ЧПУ хренова туча планируется
В базе 5 мл организаций и 3000 городов + 1200 категория

http://domain.ru/город/категория/услуга

Как выйти из данной ситуации.

Comments

[Игорь]

Перечитал вдоль и поперёк
Да, ок, в браузере работать будет, но если перейти на составленный url, то получу фигу, так как рендеринг произойдет на стороне сервера, а там нет params

[Игорь]

В общем кто как решал данную задачу?

[Игорь]

Для понимания, то-есть сервер от меня ждет числовые параметры

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "127.0.0.150:8090/organizations.get?city_id=4400&feature_group_id=243&fields=city,features&count=10&offset=0");

xhr.send();

[Игорь]

То есть, проблема в том, что если перейти по такому url, то мы не сможем загрузить нужные данные из базы

[Игорь]

nuxt generate поможет мне?

Уже подумываю заранее сгенерировать компоненты.

[mikhail96]

Игорь, как-то решили ? тоже упала задача: в каталоге все фильтры, реализованные через query-параметры, переделать на слеши

Answer 1

[Alex]

Ну, у вас же есть/будет какая-то база данных со всеми городами, их id и названиями. Если есть возможность переписать сервер - сделать так чтобы помимо ид он мог принимать название города.

Если нет, можно сделать дополнительную точку апи передавая туда название, и получить ид.

Comments

[Игорь]

Да, конечно, я могу повлиять на схему ответа.
Я уже думал об этом.

Но тут я подумал, что этот вопрос можно решить с помощью генератора.
Nuxt может сгенерировать для каждого города свой каталог в буквальном смысле.

Например:
3000 городов
Для каждого города будет произведён запрос, с загрузкой данных в статическое хранилище.

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

Вот пример:

module.exports = {

  mode: 'universal',

  generate: {
    routes (callback) {
      return axios.get('http://127.0.0.150:8090/database.getCities?country_id=3159&count=10')
        .then((res) => {

          const routes = res.data.items.map((city) => {
            return {
              route: '/' + transliteration(city.name).toLowerCase(),
              payload: city
            }
          })

          callback(null, routes)
        }).catch(callback)
    }
  },

  cache: process.env.NODE_ENV === 'production',

  env: {
    api: process.env.NODE_ENV === 'development' ? 'http://127.0.0.150:8090' : 'http://api.rusaddress.ru'
  },

[Игорь]

Вот только проблема, есть города с одинаковыми названиями.
И их очень много

[Aetae]

Игорь, на счёт одинаковых имён - просто спрашивайте у заказчика. Этого же он хочет а не вы.
А когда определитесь с уникальными именами - тогда и запрос к серверу можно поменять, вместо того чтоб генерировать кучу мусора.

[Игорь]

Aetae, Города с одинаковыми именами существуют в России.
Их порядка 60 штук, ели я не ошибаюсь.
Города тезки в разных округах.

[Игорь]

Я сейчас пока думаю над генератором, в принципе сайт будет работать в штатном режиме, если его сгенерировать.

Даже есть возможность использовать динамические параметры.

[Aetae]

Игорь, ...спрашивайте у заказчика как сделать url в таком случае.
Можете предложить ему добавить цифры. Или там эмодзи. Или регион прибавить.
Но в итоге ЧПУ хочет заказчик и ему определять их вид.

[Игорь]

Aetae,

1 (http://domain.ru/voronez)
2 (http://domain.ru/voronez/avtoservis)
3 (http://domain.ru/voronez/avtoservis/diagnostica)

Тут вопрос не в том, какая схема, а как технически реализовать, когда архитектура микро сервисная.

1. Не охота ломать апишку всякими буквенными именами в адресной строке.
2. Если использовать естественный ключ, это потребует дополнительных ресурсов для индекса.

По началу я думал, где-нибудь кешировать на сервере полные пути, что бы по ним доставать числовые значения.

Например:
voronez:342
moscow:543
sterletamak:600

В общем лабуда с этими ЧПУ в микро сервисной архитектуре.

[Игорь]

Да, согласен, лучше добавить название на латинице.
"Апишка" может принять Number or String думаю это то что мне нужно

{{API_PUBLIC}}/organizations.get?city_id=4400
{{API_PUBLIC}}/organizations.get?city_id=voronez