Vue SSR issue with no ssr - vue.js

Question

I'm using my own SSR boilerplate for Vue.
https://github.com/Djancyp/luna-vue-ssr-boilerplate
All working fine pages are SSR rendering.
The issue that I'm currently having is no SSR components are failing as soon as I import them to components.
server trow err:
ReferenceError: document is not defined
I'm aware of the issue is document does not exist on nodejs server.
My question is How can I stop rendering no SSR components on the server ?
-I've tried No-SSR but no joy.
my server-enty.ts
import createApp from './app'
const config = require('config')
const isDev = process.env.NODE_ENV !== 'production'
export default context => {
return new Promise((resolve, reject) => {
console.log('what the f server')
const s = isDev && Date.now()
const { app, router, store } = createApp(config)
const { url } = context
const { fullPath } = router.resolve(url).route
if (fullPath !== url) {
return reject({ url: fullPath })
}
router.push(url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
console.log(matchedComponents)
if (!matchedComponents.length) {
console.log('what the **** mate error')
return reject({ code: 404 })
}
Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
store,
route: router.currentRoute
}))).then(() => {
isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
const meta = (app as any).$meta()
context.meta = meta
context.state = store.state
resolve(app)
}).catch(err => {
console.log(err)
return reject
})
}, reject)
})
}

Answer 1

Vue-SSR executes asyncData and serverPrefetch on the server-side. Remove these from your component, move the code to created/ 'mounted' and it should stop rendering on the server-side.
My assumption is that you are executing document. within asyncData or serverPrefetch.

Answer 2

Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
store,
route: router.currentRoute
}))).then(() => {
isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
const meta = (app as any).$meta()
context.meta = meta
context.state = store.state
resolve(app)
}).catch(err => {
console.log(err)
return reject
})
}, reject)
the issue was that I was rejecting if the async template not exist.
Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
store,
route: router.currentRoute
}))).then(() => {
isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
const meta = (app as any).$meta()
context.meta = meta
context.state = store.state
resolve(app)
}).catch(err => {
console.log(err)
return reject
})
})
this resolved the issue but needs to improve the code a little bit.
Thanks for helps guys.