На написание этой статьи меня сподвигло необходимость совместить все мои шаги для получения SSR на Vue 2 (Vue cli).
я не исключаю того что возможно я искал не так как нужно и по этому тупанул и делал все достаточно долго, но для того что бы мои ошибки не повторялись я и пишу это
Вообще в интернете уже есть прилично статей на использование SSR с Vue 2 но большая часть из них с использование webpack, мне же хотелось использовать встроенный Vue cli он более нативный, да и удобнее если честно. По мимо того что я достаточно долго искал такой вариант реализации ssr, но и после нахождение желаемого я столкнулся с тем что большая часть ошибок вызванная ssr, решается не особо просто, да есть много тех кто сталкивался с той или иной проблемой связанной с тем что ssr не дружит исходным кодом проекта и требуются доработки. Решение в основном есть для Nuxt, и да конечно в 3 из 10 случаев оно подходит для Vue, но такой расклад меня не устраивал.
Например в чистом vue нет варианта проверки на какой стороне идет обработка, `process.browser` во Vue не доступен в отличии от Nuxt как и компонент <no-ssr> или <client-only> в версии <2.9 .
Начнем с того что эта cборка Vue с SSR (именно на vue-cli) уже настроена и готова к использованию. И как бы все можно работать если у вас новый проект. Но что делать если вам нужно совершить перенос и у вас вылезло куча ошибок?
Начнем с того что вам нужна проверка для использования локального хранилища, или же используете window для создание глобального event.
И первым делом нам нужно проверять существует ли на данный момент window вот такой записью "if (typeof window != 'undefined) { внутри при условии true, можно выполнять операции как с document/window так и локальным хранилищем}" т.к если window не undefined то значит сервер уже выполнил свою часть и загрузка странице уже идет на стороне клиента на самом деле это кустарный вариант client-only или no-ssr из nuxt.
Вторая проблема что у меня возникла это использование store в router.
Так как теперь приложение инициализируется по новому почти как в Vue 3, то и запросить внутри модуля router как раньше import store from '@/store' не получиться, так как теперь store инициализируется функцией как собственно и сам router. И не долго думая внутри инициализации приложения перед синхронизацией store и router, в main.js уже в функции инициализации приложения :"
const store = createStore()
const router = createRouter(store) // я поместил store как аргумент к функции
" это и помогло мне решить проблему доступа к хранилищу из роутера.
Что же пока что это были самые острые проблемы с которыми я столкнулся при подключении ssr на vue 2 с cli, я думаю все же дополнять эту статью в будущем, и конечно буду рад видеть более элегантные решения в комментариях.
