Vue Server Side Rendering

Question

If we convert SPA application to SSR+SPA when a page is rendered on server the data is loaded from vuex store by dispatching actions that make http calls through axios to api on localhost.

Or that data is need to be loaded from database and some how passed to vue and prevent dispatches of store actions?

In traditional application I will retrieve that data direct from data base and not make get request.

It is normal? This is the way?

Nuxt also use get request and not database queries:

export default {
  asyncData({ params, error }) {
    return axios
      .get(`https://my-api/posts/${params.id}`)
      .then(res => {
        return { title: res.data.title }
      })
      .catch(e => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  }
}

I can do that without nuxt in serverPrefetch().

On other hand if I do something like

export default {
  asyncData({ req, res }) {
    and here if I access database like in node server
   (req, res) => {
      **select something from database **
      return User.findOne({ });
   }
  }
}

Back end sensitive code will be visible in front end script?!

ru.nuxtjs.org/guide/async-data and ru.nuxtjs.org/api/pages-fetch always in examples is used axios and not database query — Michael
If I understand well I need to make 1-10 http requests on server side to render a page?! This will eat cpu and memory? But what will be if the site will be accessed by 1000 users per minute/ second? — Michael
or I need to combine requests for all components in one when page is rendered on server — Michael

Michael Michael · Accepted Answer · 2020-09-23T06:51:56

By using nuxt you mean:

/plugins/api-context.server.js

export default (context, inject) => {
  inject("api", async (controller, method, params) => {
    try {
      let api = require("../api/" + controller.replace(/^\/+|\/+$|\.+/g, ""));
      return await api[method](params);
    } catch (e) {
      console.error(e);
      throw e;
    }
  });
};

/nuxt.config.js

  plugins: [
    "~/plugins/api-context.client.js",
    "~/plugins/api-context.server.js"
  ]

Now the this function.$api will directly call the controller method on the server, and this on the client.$api send http request via axios.

How to do the same without nuxt?

Vue Server Side Rendering

1 Answers