Как используя Node.js и Vue.js создать SPA?

Question

[mr_blaze]

Всем привет!

Есть сайт, на нём меню. User жмёт на кнопку в меню (к примеру Блог) и без перезагрузки страницы получает список постов из бд, но при этом сайт нормально индексируется SEO.
Как решить эту задачу используя node.js и vue.js?

PS: Покажите пожалуйста код,

Заранее спасибо!

Answer 1

[Василий Назаров]

Почитайте вот этот вопрос.
https://toster.ru/q/441372?e=5485607#answer_item_1...
В двух словах:
SPA и SEO в общем случае несовместимы, поэтому, если нужно и то, и то, делается две работы: одна - SPA, вторая - SSR.
SSR для Vue.

Comments

[mr_blaze]

эту статью я прочитал два раза, но так и не понял как решить эту задачу

Есть сайт, на нём меню. User жмёт на кнопку в меню (к примеру Блог) и без перезагрузки страницы получает список постов из бд, но при этом сайт нормально индексируется SEO.
Как решить эту задачу используя node.js и vue.js?

. В видео https://www.youtube.com/watch?v=Hv5SM19oQ6w&index=... показано то что мне нужно, но статьи необходимо брать из бд.

[Dark Hole]

mr_blaze: user жмет на кнопку с href='xxx', js отменяет переход для user, а поисковик переходит.

[mr_blaze]

Dark Hole: извиняюсь за столь глупый вопрос, но что происходит когда

user жмет на кнопку с href='xxx', js

[Dark Hole]

mr_blaze: на чистом js это выглядит так:

el.addEventListener('click', function(e) {
  e.preventDefaults();
  getInfoFromDatabase();
});

[mr_blaze]

Dark Hole: Нет, я имел в виду то что когда когда user жмёт на кнопку и ем даётся страница с блогом, а там посты берутся из бд

[Dark Hole]

mr_blaze: он не перезагружается, верно?

[mr_blaze]

Dark Hole: верно

[Dark Hole]

mr_blaze: но строка в url меняется?

[mr_blaze]

Dark Hole: да

[Dark Hole]

mr_blaze: а если будет перенаправление на готовую страницу, которую можно проиндексировать?

[mr_blaze]

Dark Hole: в каком смысле?

[Dark Hole]

mr_blaze: в прямом. Если мы будем там с перезагрузкой, если у нас JS не работает, и без перезагрузки, если работает JS?

[mr_blaze]

Dark Hole: а каким образом

без перезагрузки, если работает JS

?

[Dark Hole]

mr_blaze: ну вы JS достаточно хорошо знаете?

[mr_blaze]

Dark Hole: Не про, но знаю

[Dark Hole]

mr_blaze: тогда вы должны знать, про отмену стандартного поведения на событие

[mr_blaze]

Dark Hole:

про отмену стандартного поведения на событие

я знаю

[mr_blaze]

Dark Hole: я имел в виду каким образом будет отображаться страница

[mr_blaze]

Dark Hole: Ладно, как отобразить страницу без перезагрузки я знаю, но как сделать так чтобы url сменился?

[Dark Hole]

mr_blaze: history api

[mr_blaze]

Dark Hole: Спасибо большое!

[mr_blaze]

F как мне изменить содержимое div? В обычном JS есть конечно innerHTML но как же viryual DOM

Answer 2

[senefu]

Если ты хочет использовать именно Express для рендеринга Vue, то попробуй https://github.com/express-vue/express-vue
Остальные решения никакого отношения к Экспресс вообще не имеют. С этой библой ты сможешь использовать Vue вместо ejs.

Comments

[mr_blaze]

За библиотеку спасибо, но как же подружить SEO и SPA?

[mr_blaze]

Вот как здесь https://github.com/GitHubTochkaDev/vuejs-tutorials... только просить у сервера эти router-view

[senefu]

mr_blaze: там же написано - Server-side rendering, в чем проблема?

[mr_blaze]

senefu: проблема в том что я не понимаю как соединить это https://github.com/express-vue/express-vue и это https://github.com/GitHubTochkaDev/vuejs-tutorials...

[senefu]

mr_blaze: я не понимаю зачем нужно соединять этот проект с "сервер на node.js и express"

[mr_blaze]

ладно, просто пожалуйста ткните мне пальцем или напишите как решить эту задачу

Есть сайт, на нём меню. User жмёт на кнопку в меню (к примеру Блог) и без перезагрузки страницы получает список постов из бд, но при этом сайт нормально индексируется SEO.

[senefu]

Server-side rendering

[mr_blaze]

senefu: что это????!!!! я просто не понимаю! покажите пример

[senefu]

mr_blaze: вы не знаете что такое Server-side rendering? При чем тут ПРИМЕР? Гугли что это такое сначала!

[mr_blaze]

senefu: я прочитал доки, но не нашёл ответа на вопрос. Пожалуйста дайте хоть набросок решения . PS: я начинающий программист и лучше понимаю код чем доки .

[senefu]

mr_blaze:

https://snipcart.com/blog/vuejs-tutorial-seo-example
https://github.com/cs1707/vue-zhihudaily-2.0
https://github.com/mgyongyosi/VuejsSSRSample
https://github.com/lincenying/mmf-blog-vue2-ssr
https://github.com/fenivana/vue-ssr-boilerplate

[mr_blaze]

senefu: За ссылки спасибо, но почему-то ничего даже не запустилось

[senefu]

mr_blaze: а чего запускать? Ты же ЧИТАТЬ код собрался, ахахх)))

[mr_blaze]

senefu: Я прочитал! Но я не понимаю где я могу сделать так

var express =  require("express"),
      app = express();

app.get("/", (req, res) => {
//magic......
// giving rendered page with vue....
})

app.listen(3000m () => {
console.log("listening")
})

Покажите мне код express и vue - html

[senefu]

mr_blaze: ты похоже не знаешь ни Express, ни Vue! Ты решил, что можешь эту бесполезную ерунду скипануть и сразу приступить к SSR?

Answer 3

[Alexander]

Попробуй посмотреть в сторону https://github.com/chrisvfritz/prerender-spa-plugin и https://www.npmjs.com/package/express-history-api-...

Answer 4

[Марк Ким]

https://ru.nuxtjs.org