1
votes

I have panel is developed by vuejs and vuetify that uses of v-router for managing routes in client-side, actually I had developed approximately 70% of my panel and in and due to the final change, I have to handle the server post request only to return from the payment page. I want to use NUXT for SSR, but the problem is that NUXT ignores all my past routes because it does not have these routes itself. My question is, can NUXT only be used to load just one page after server request to client while my panel work properly in the client-side? I am new to web programming and I hope I have asked the right question. Anyway, thank for all your helps.

I added nossr.vue in pages directory without index.vue file(This is the only component in this directory and the rest of my vue components are placed in the Components directory). I use of [https://stackguides.com/questions/54289615/how-to-read-post-request-parameters-in-nuxtjs][1] for custom middleware and post request handle class.

Here is postRequestHandle.js:

const querystring = require('querystring');

module.exports = function (req, res, next) {
    let body = '';

    req.on('data', (data) => {
        console.log("post request data",data)

        body += data;
    });

    req.on('end', () => {
        req.body = querystring.parse(body) || {};
        console.log("post request handler",req.body)

        next();
    });
};

and nuxt.config.js

export default {
    devServer: {
        host: 'mypanel.test.net',
        port: 8080,
        disableHostCheck: true,
        hotOnly: true,

    },

    serverMiddleware: [
        { path: '/clickout', handler: './server-middleware/postRequestHandler.js' },

    ],
    layout(context) {
        return 'nossr'
    }

}
2

2 Answers

2
votes

You can disable SSR for every page except your particular page by setting res.spa = true in the serverMiddleware

export default function(req, res, next) {
  if (req.url !== '/clickout') {
    res.spa = true;
  } 
  next();
}

See also:
Nuxt Issue: Per-route ssr

1
votes

Create an extra layouts in Nuxt called nossr.vue, make it's first element a <client-only> element. On every page except the SSR rendered page you put this:


export default {
  layout: 'nossr'
}

For more information regarding layouts in Nuxt, please look at this https://nuxtjs.org/guides/directory-structure/layouts/