Server Side Vue State

How to Handle A Session Based Share State

Vue Shared State On The Server

Location of Shared State Store

app.use((req, res) => { // This is your entire shared state store for a user per session // The initial shared state store is created from your client side code req.session.state; // server side shared state store found here res.sendStatus(200); });

Updating Your Shared State

Ajax Call Updates

You can update your shared state store with ajax calls to your own server to modify the server side storage. This storage is already set for each independent user based on their session on the client. The cache used for the storage is Redis.

Page Route Controller Props

You can pass down your shared state store from the route controller to update the client.

Middleware for your View Routes

You can pass down your shared state store from the route controller through middleware to update the client.

Examples: Server Side Shared State Updates

Ajax Call Updates

Making a post to your server to update the shared state for that user.
app.post((req, res) => { const {reducer_data, reducer_name} = req.body; req.session.state[reducer_name] = reducer_data; res.sendStatus(201); });

Page Route Controller Props

const controller_method = (req, res) => { req.session.state = PRE_POPULATED_REDUX_STORE; serverSide(pageName, req).then((serversideObject) => { res.status(200).render('pages/index', globalRenders('pages/index', req, res, Object.assign({}, { hashId: makeHash(40) }, serversideObject))); }).catch((serversideObject) => { res.status(200).render('pages/index', globalRenders('pages/index', req, res, Object.assign({}, { hashId: makeHash(40) }, serversideObject))); }); app.get('/', controller_method);

Middleware for your View Routes

app.get('/', ReducerPropMiddleware, render('pages/index', { hashId: makeHash(40) }));

To Keep In Mind

Global UI with State

Any global UI with state, must be stored in server side shared state. Things like flyouts or menu states must be stored in shared state.

Server Side Shared State Size

The size of your shared state store is fairly large on the server but can not handle the normal SPA size limit (Every ajax call). Your clients have a larger capacity of memory.

Don't Store All Ajax Call Data

Shared State is not a API and does not need to store all of the data from the API on each page.

Any data that is shared between pages should be recalled or stored globally.

The client does have a larger memory size than your server and all data is kept on that page while you are on it. This is what ajax calls looked like on old school templates. Any data on your client shoudl be public and known that if your security content header is not in place currently, the javascript on the client can be taken and un-ugflied with different dev tools. The data on the client can be accessible.

Update your content security header so data is not stolen or broken. A common SPA hack is to interfer with your root bundle, braking your entire application on your server.