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
– avcajaraville, Commented Oct 23, 2018 at 8:56
Sure was just a recommendation we develop a SSR Site too and have good experience with Nuxt so far — niclas_4
– niclas_4, Commented Oct 23, 2018 at 8:58

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

0

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.

answered May 5, 2019 at 5:10

user588950

313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

avcajaraville Over a year ago

Hey, thanks for your answer, but you are not actually giving a concrete example or providing a full explanation on how to achieve this. As I pointed out, I got the hacker news example and I'm familiar with it. My use case was different, as I have an already existing BE and all I want to avoid is external http calls. However, if you can provide a concrete example on how to implement this, I would be very happy :)

Collectives™ on Stack Overflow

vue server side rendering and data population

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related