Search code examples
vue.jsrenderingserver-side-rendering

Vue server side rendering performance issue

I got an weird issue. Here is my code for rendering the vue pages. In my local machine, the rendering time for this page is about 50~80ms around, however, if i access the page parallel, sometimes could be 120ms around(maybe 5 times out of 200 requests ), but most of time, it is still 50~80 ms.

However, when i deploy the code to our production docker, these peek time is getting worse, sometimes it can reach 1 second, and got 500ms a lot of times, the performance is bad. It makes no sense, the request load is not heavy and we have load balance too. For a similiar page which we are using EJS to render, we don't see this kind of peek a lot. The backend logic and services using for EJS and Vue are all the same.

Client side rendering is also the same, it has similar symptom.

Does any body know what kind of reasons could lead this issue?

enter image description here

Solution

  • first of all do two things:

    1- do a quick test using lighthouse if possible, it'll help pin pointing the problem.

    2- check console for any errors AND warnings.

    without further information about you'r code i don't think it's possible to say what's exactly causing the problem. However after searching for some time i came about an article which the writer had the same performance problems.

    This is the result of his lighthouse check. As you can see his website had shortcomings in indexing and content full paint; Long story short he had an infinity loop and v-for loops without keys.

    following are some tips on how you can better optimize you'r vue app:

    1. Apply the Vue Style Guide and ESLint

    There’s a style guide in Vue docs: https://v2.vuejs.org/v2/style-guide/. You can find there four Rule categories. We really care about three of them:

    Essential rules preventing us from errors, Recommended and strongly recommended rules for keeping best practices – to improve quality and readability of code. You can use ESLint to take care of those rules for you. You just have to set everything properly in the ESLint configuration file.

    1. Don’t use multiple v-if

    2. Don’t write api call handlers in components

    Simply do what is locally necessary in components logic. Every method that could be external should be separated and only called in components e.g. business logic.

    1. Use slots instead of large amounts of props

    5.Lazy load routes

    1. Use watcher with the immediate option instead of the created hook and watcher together.

    Here another article on how to improve you'r vue app.

    Good Luck!