@kirill-93

Как перевести проект на nuxt?

Есть работающий проект на vue.js. После аудита сеошников, требуется организовать ssr.
Я пол дня изучал вопрос, везде написано по кусочкам. Хотелось бы убедиться, что я правильно понимаю картину:
- Суть SSR в том, что мой первый запрос на сервер вернет мне не пустой html файл как сейчас (приложение на vue-cli), а сразу заполненный. В остальном никакой разницы нет.
- Делается этот самый рендеринг средствами nodejs, то есть вместо простой отдачи файло nginx'ом, предстоит настроить обработку запросов через node.
Далее меня смущают отличия обычного приложения на vue от приложения на nuxt, а именно измененной структуры директорий и роутинга. Получается, что мне надо весь проект переносить и немного изменять. Почему нет возможности просто добавить серверный рендеринг в мой уже существующий проект? Ко всему прочему не до конца ясна картина с аяксом. Вот, например, у меня при загрузке страницы идет ajax запрос, который наполняет данными страницу. Во-первых непонятно как нода определит эти запросы, у меня они, например через $.ajax(), во-вторых есть запросы, которые выполняются довольно долго (пару секунд) - это статистика, которая считается. Сейчас на месте ее появления крутится красивый прелоадер, а как это будет после переноса на nuxt? Страница будет рендериться эти пару секунд?
  • Вопрос задан
  • 1608 просмотров
Решения вопроса 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
везде написано по кусочкам

https://ssr.vuejs.org/

Почему нет возможности просто добавить серверный рендеринг в мой уже существующий проект?

Вообще на nuxt свет клином не сошелся, гугл по запросу vue cli ssr выдает несколько пакетов, в том числе довольно активных.

Далее меня смущают отличия обычного приложения на vue от приложения на nuxt, а именно измененной структуры директорий и роутинга.

Чтобы не переписывать весь роутинг на нюкстовский (а это действительно не очень весело), попробуйте router-module. src переименовываете в components, остальное остается как есть.

вместо простой отдачи файло nginx'ом, предстоит настроить обработку запросов через node

reverse-proxy к приложению на nodejs делается очень просто, да и мануалов полно:

upstream myAppName {
    server 127.0.0.1:3003;
}

server {
    listen 80;

    location / {
        proxy_pass http://myAppName;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header User-Agent $http_user_agent;
        proxy_cache_bypass $http_upgrade;
    }
}


$.ajax()

Если это jQuery, то придется заменить на axios. Кое-какие запросы придется перенести из mounted в asyncData.

Сейчас на месте ее появления крутится красивый прелоадер, а как это будет после переноса на nuxt? Страница будет рендериться эти пару секунд?

Делайте запрос к этой статистике только на клиентской стороне:
mounted() {
    if (process.browser) {
        this.fetchStats();
    }
}

Вообще такие медленные вещи надо в любом случае кэшировать на бэкенде, например класть заранее посчитанную статистику в redis там или mongodb.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы