vue server side rendering and data population

Question

Im currently refactoring an app and converting all my base code into vue. One of my requirements is to do server side rendering.

I have been follow vue ssr example along with hacker news example to help me understand ssr.

I do have however a question for which I cant find any good answer, and before further development, I want to make sure we are doing the right thing.

I want to know if its a good practice to have some actions in a vue store calling an api for server side rendering.

All the examples I have found deal with a real external endpoint they connect and perform request. But that is not the setup we have.

We do have a "normal" express app with its own endpoints; so, for example, express router looks a bit like this:

// This is our post model, it lives on the same app, so its not a external API
app.get('/posts', (req, res) => Posts.getPosts());

// Resolve request for SSR rendering, pretty much the same as in [vue ssr example](https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router)
app.get(
  const context = { url: req.url }

  createApp(context).then(app => {
    renderer.renderToString(app, (err, html) => {
      if (err) {
        if (err.code === 404) {
          res.status(404).end('Page not found')
        } else {
          res.status(500).end('Internal Server Error')
        }
      } else {
        res.end(html)
      }
    })
  })
);

This part works fine on both client and server. If you request something to /posts you get your response back.

To have a more modular code, we are using vuex stores; being one of the actions called fetchPosts and this action is the responsible of fetching the current posts in the view.

...
actions: {
  fetchPosts({ commit }) {
    return $axios.get('/posts').then((response) => {
      commit('setPosts', {
        posts: response.data
      });
    });
  }
},
...

I believe for client side this is good, but when rendering on the server, this is probably not optimal.

Reason being axios performing an actual http request, which will also have to implement auth mechanism, and in general, really poor performant.

My question is: is this the recommended and standard way of doing this ?

What are other possibilities that works in server and client ?

Do people actually creates separated apps for api and rendering app ?

Thanks !

I do know Nuxt, but want to implement and develop this without using anything else, so looking for a solution that doesn't require more dependencies :) — avcajaraville
Sure was just a recommendation we develop a SSR Site too and have good experience with Nuxt so far — Badgy

user588950 user588950 · Accepted Answer · 2019-05-05T05:10:37

I know this is an old question, but for future visitors:

The recommended way is to leverage webpack module aliases to load a server side api for the server and a client side api for the browser. You have to share the same call signature which allows the api to be "swapped". This of course greatly improves performance as the server side api can do direct db queries instead fetching data over http.

In essence your webpack.server.config.js should have:

resolve: {
    alias: {
      'create-api': './create-api-server.js'
    }
   }

In your webpack.client.config.js:

resolve: {
    alias: {
      'create-api': './create-api-client.js'
    }
  }

Importing create-api will now load the required api.

Have a look at https://github.com/vuejs/vue-hackernews-2.0 to see a full example.

vue server side rendering and data population

1 Answers