0

I have a long list that I want to let the user manipulate in a browser-based web application. Using jQuery, the most straightforward way would be to render it on the server as part of the initial page load, and include a small script that registers event handlers for AJAX requests and DOM manipulation.

In the case of VueJs however, it seems to me that the most straightforward way is for the initial request to load the page layout only, then call an API to get the data for the long list. In other words, VueJs renders the initial list, not the server.

While this is workable, I am hesitant to introduce this second request unless I really have to. Is there a more straightforward way to go about this? Am I missing something about how VueJS works? I would really like to render the initial list on the server side if possible. For example, would it be workable to somehow include the initial list as 'transcluded' content?

I don't want to have to get in to VueJS' complete server side rendering, since it looks like an advanced topic (and this is a simple task). I have experimented with passing the initial list data as JSON in the <head> of the page (inside tags that register it as a javascript variable), but that seems like a hack/workaround.

Improve this question

1 Answer 1

Reset to default
2

In the case of VueJs however, it seems to me that the most straightforward way is for the initial request to load the page layout only, then call an API to get the data for the long list. In other words, VueJs renders the initial list, not the server.

Yes, it is most straightforward way, and considered as anti-pattern also. Just for the reason in your next sentence: "While this is workable, I am hesitant to introduce this second request"...

I think you should read following post on medium.com first. It is about Vue and Laravel framework, but the principles herein can be considered universal:

https://medium.com/js-dojo/avoid-this-common-anti-pattern-in-full-stack-vue-laravel-apps-bd9f584a724f

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

4 Comments

I don't like that approach at all.That type of setup will get massively confusing very quickly for a negligible performance boost.
@craig_h Depends on the situation. In some (most?) of setups it can increase the perfomance (Time To Interactive) by tens on percent. And this is significant, not negligible perfomance boost.
It's negligible because we are talking about milliseconds. Hugely over complicating your app and tightly coupling the front end to the back end for a half second performance boost on a slow internet connection just doesn't sound like a good idea to me.
@craig_h As I said, it depends on situation. Where you are not caring about a half second extra, the others may care about. What really doesn't matter about, is whether and what you are considering unnecessary.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.