VueJS and SSR: how to not re-render

VueJS
1

VueJS newbie here. I finally got a skeleton app working with SSR and reactivity. One issue is still dogging me. When the server first sends the fully rendered page and displays it correctly, it then flickers because it drops into the meteor subscribe. But that isn’t necessary upon first load, because it already has all the data.

How can I prevent re-subscribing to data when the page is already fully rendered? Is there a way to check for SSR on the client side?

2

Hey. I am going to look into this today actually. The problem is that there needs to be a form of none reactive hydration of the collections. I have some ideas for it (pre hyrdate as part of the html body or freeze reactive updates on innitial subscription)

I will keep you posted if I made that work or at least a message in a couple of hours with an update

3

Not familiar how vuejs hydrates, but here is a related post I did for React

What we did was on load, the component checks for a specific ID if it exists in the DOM and just use that content on re-render. That removes the white-screen repaint for SSR. Ideally this is automatically handled by React and Vue.

1 Like
4

When I look at the output outside of a browser (eg. with curl) I can see that the server properly rendered the entire page

<body>
 <div id="app">
   <div data-server-rendered="true" class="LayoutDefault" data-v-57d42f30 data-v-77a63571>
...
   </div>
 </div>
<body>

However, there is no information that would allow the VueJS component to hydrate. Maybe this just isn’t something Vue / Meteor (akryum modules) provide. https://ssr.vuejs.org/guide/hydration.html

5

Yes this is true. @akryum has created Meteor Vue SSR for this. However even with this package, it will not solve the problem, because its related to the clientside hydration part of minimongo.

Minimongo currently has no clean way of being hydrated (ejson data from html into clientside collection without triggering updates. That’s currently something i’m looking into, becuase its quite a critical thing for me to have.

I think its do-able. Will keep you posted.

1 Like