Vuex nuxtServerInit not being called
christopher4lis opened this issue · comments
Versions
nuxt-vite: ^0.1.0
nuxt: ^2.15.4
Description
Usually nuxtServerInit is called once on page load when using the webpack build. With nuxt-vite, it doesn't seem to be called at all. Is this something with SSR being disabled by default? To replicate, just add the nuxtServerInit action to a store, console log some code, and you'll see it's never outputted when using nuxt-vite.
Any solutions yet? Same problem.
I have to render an authed page in server-side before it been sent to client.
Versions
nuxt: ^2.15.6
nuxt-vite: ^0.1.1
Reproduction
Those code run well when using webpack
nuxt.config.js
module.exports = {
buildModules: [
'nuxt-vite',
'@nuxtjs/router',
],
router: {
middleware: [
'check-auth'
]
},
vite: {
server: {
watch: {
usePolling: true
}
}
}
}
store/index.js
import { cookieFromRequest } from '~/utils';
export const actions = {
nuxtServerInit({ commit, dispatch, route }, { req }){
const token = cookieFromRequest(req, 'token');
if (!!token) {
commit('auth/setToken', token);
}
}
};
store/auth.js
import Cookie from 'js-cookie';
export const state = () => ({
user: null,
token: null
});
export const getters = {
user: state => state.user,
token: state => state.token
};
export const mutations = {
setToken(state, token){
state.token = token;
},
fetchUserSuccess(state, user){
state.user = user;
},
fetchUserFailure(state){
state.user = null;
},
logout(state){
state.token = null;
state.user = null;
},
updateUser(state, { user }){
state.user = user;
}
}
export const actions = {
saveToken({ commit }, { token, remember }){
commit('setToken', token);
Cookie.set('token', token, { expires: remember ? 365 : null });
},
async fetchUser({ commit }){
try{
const { data } = await this.$axios.get('/auth/user');
commit('fetchUserSuccess', data);
}catch(e){
Cookie.remove('token');
commit('fetchUserFailure');
}
},
updateUser({ commit }, payload){
commit('updateUser', payload);
},
async logout({ commit }){
try{
await this.$axios.delete('/auth/authorizations');
}catch(e){}
Cookie.remove('token');
commit('logout');
}
}
middleware/auth.js
export default async ({ $axios, store }) => {
const token = store.getters['auth/token'];
if (process.server) {
if (token) {
$axios.defaults.headers.common.Authorization = `Bearer ${token}`;
} else {
delete $axios.defaults.headers.common.Authorization;
}
}
if (!store.getters['auth/check'] && token) {
await store.dispatch('auth/fetchUser');
}
}
I have it working with
vite: { ssr: true }
in nuxt.config.js
any update on this? i tried to enable ssr on vite config but got some internal modules error and a big increase of memory usage on my project.
any update on this? i tried to enable ssr on vite config but got some internal modules error and a big increase of memory usage on my project.
What specific error? File system access? https://vitejs.dev/config/#server-fs-allow
I don´t know why exactly but the error message is no longer appearing.
Enabling srr makes nuxtServerInit work again.
I just note two facts when enabling Vite SSR on my project:
-
Increase of memory usage in dev mode. Memory usage jumps from 200mb to 1.2gb.
-
Slow load time for css and components of page in dev mode.
Is this expected behavior?
Update:
I found that the memory increasing usage was caused by pnpm (in my case). So I switched to yarn and I'm no longer having increased memory usage issue on enabling ssr on vite.