Как происходит отправка запроса на ssr приложении?

Question

[andrei24]

Всем привет.
Как отрабатывает отправка запроса на для получения данных в vuejs (ssr) + node express сервер?

Строю ssr приложение, очень важна индексация и чтобы данные были получены до отображения страницы. Для работы взял фреймворк nuxtjs.org и node express сервер.
Структура приложения:
api.site.ru - апи без авторизации
site.ru - приложение + сервер express

На главной site.ru сразу идут запросы на api.site.ru :

<template>
...
</template>

<script>
    import axios from 'axios'

    export default {
        async asyncData({ params }) {
            console.log('server ajax')
            let { data } = await axios.get('http://api.site.ru/companies')

            return { companies: data }
        }
    }
</script>

Запускаю npm run dev. При открытии site.ru никаких ajax не идет. Запрос node express сервер отправил. Все отлично работает.
Затем создаю вторую страницу site.ru/new (new.vue) тот же код с ajax запросом. И при переходе между страницами браузер шлет обычный ajax, но если вбить сразу site.ru/new, то запроса нету ?

Answer 1

[Владлен Хеллсайт]

Так всё правильно, если вы загружаете вкладку то этот запрос будет выполнен на сервере, а на клиенте он уже будет без перезагрузки перемещаться по ссылкам. В nuxt-link внутри именно тэг "a". asyncData вызывается на сервере для получение данных, так и на клиенте когда в SPA приложении перешли.

Comments

[andrei24]

Если запрос выполняется на клиенте при nuxt-link, как будут дела с индексацией ?

[Владлен Хеллсайт]

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

Answer 2

[Алексей Ярков]

И что не так? Переход между страницами обрабатывается клиентом, соответственно asyncData выполняется на клиенте. Все нормально.

Comments

[andrei24]

Можно ли сделать обработку перехода между страницами сервером?

[Алексей Ярков]

andrei24, конечно. Замените router-link на <a href=""></a>.

[andrei24]

Алексей Ярков, Спасибо огромное, работает. Но рендер страницы ожидал будет быстрее происходить, а чувство что наоборот медленнее. Какой подход лучше сделать для быстродействия и очень важна индексания?

[Алексей Ярков]

andrei24, кэширование включите например.

[andrei24]

Алексей Ярков, @nuxtjs/component-cache подключен. express будет работать под nginx. Но сейчас ответ очень медленный. Был 2s, сейчас 7 (если сделать через ssr)

[Алексей Ярков]

andrei24, ну так надо время на рендер, смиритесь