4 ms·
At the end of the post he mentions what I think is a really under-rated approach: a “normal” server rendered application with Vue components used per-page when
by burlesona 8y ago
At the end of the post he mentions what I think is a really under-rated approach: a “normal” server rendered application with Vue components used per-page when the UI is highly dynamic.
I’ve built a relatively large app this way and found it to be quite nice. Vue works very nicely inside the container elements in the page where I need it, and it’s pretty easy to bootstrap the initial state into the page using the same serializers I do for JSON endpoints, so once it’s rendered users can spent a lot of time on a particular screen without any further page loads.
The last bit that’s nice is bundle size. It’s not too hard to split bundles based on unique entry pages, so you can end up with something like 30kb of “global” JS and then a second bundle for the big meaty pages that may range from 20 - 200kb. With caching that means 90% of screens have a very small payload and load really fast, and the rest have a slightly slower first load and then the same perf profile.
This has been a highly productive way to work, I’m surprised that it’s not written about more often.
- mythrwy 8y agoSeconded. This is a great way to go. Quite often there isn't a reason to have SPA routing. But that doesn't mean you can't enjoy lots of benefits of the fronted framework without the unneeded complexity solving something you don't really need in the first place.
- zdragnar 8y agoIsn't this how Facebook uses React most of the time as well?
- aitchnyu 8y agoDid anybody solve reusing single file components in a page? I tried to reuse two components in a single page and I had to inline the contents to the page I wanted them. Is there a way I could import them? ``` Singe file component 1: <template for component 1> <script for component 1> Single file component 2: <template for component 2> <script for component 2> ``` ``` {% include singlefilecomponent1 %} {% include singlefilecomponent2 %} ```