vuejs-templates / pwa

PWA template for vue-cli based on the webpack template
MIT License
3.04k stars 506 forks source link

SSR #33

Open azampagl opened 7 years ago

azampagl commented 7 years ago

@addyosmani First off, thanks for such a great template. I managed to integrate this template with a clean ASP.NET Core 1.1 project with almost no hassle.

The only thing I haven't managed to hash out is how to handle SSR cleanly. Vue recommends using vue-server-renderer (https://ssr.vuejs.org/en/), but I've been running into issues due to the PWA requirements. In the ASP.NET Core world, SSR can be achieved with the SPAServices package (good example at http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/), and adding a pre-render tag to one of the Razor Views and all the magic happens in the background. E.g.

<div id="my-app" asp-prerender-module="VuesStuff/renderOnServer" ... ></div>

but this can't be achieved with this vue template because it builds off of index.html where the pre-rendered tags are obviously not available.

Just trying to pick the communities brain on a path forward...?

(FYI this guide in particular made it super simple to integrate with your template https://blog.kloud.com.au/2017/02/14/running-vuejs-on-aspnet-core-apps/)

addyosmani commented 7 years ago

Thanks for opening this issue @azampagl and my apologies for the delayed response (travels). I think the Vue PWA template should be adjusted to work well with server-side rendering and I wonder if we can (either directly or via a recipe/docs) note how to switch from using the index.html to relying on vue-server-renderer to take care of this step for us.

@yyx990803 @sdras Do you have opinions on how much we should put in work to make this work well here vs. pointing folks at the Nuxt PWA template if they're trying to use SSR?

Thanks for pointing me at https://blog.kloud.com.au/2017/02/14/running-vuejs-on-aspnet-core-apps/! I hadn't seen this before.

sdras commented 7 years ago

IMO, since Nuxt has better lighthouse scores out of the gate, seems like it might make more sense to synch up with their efforts here so as not to duplicate efforts, and also because it's well-documented and easy to learn. It seems like this would have to wait until their full 1.0.0 release, though, as there are some major improvements coming.

danikane commented 7 years ago

Well, this is out of the box with vue-pwa: image

Of course with some tinkering on the web server.

khawarizmus commented 7 years ago

@addyosmani @sdras any progress regarding this issue ?

newenegue commented 7 years ago

+1

nmfzone commented 7 years ago

+1 Is this possible right now?

edwinnnss commented 7 years ago

+1

jaubut commented 6 years ago

+1