Server Side Rendering

[amdad]

Hey Scott, thanks for awesome Vuetober!
Did you ever thought about Vue 2 server side rendering in October?

Although Vue itself is fantastic, static pages are here to stay for a while.
SEO and things, you know.. ;)
I'll be glad to hear your thoughts on that matter.

[scottbedard]

Thanks, glad you're enjoying it! As for your question, I did not think that SSR would be part of Vuetober because Vue did not support it with PHP. This was a bummer, but there is good news. One of the features implemented in Vue 2.5 was environment agnostic server side rendering.

With this improvement, it should now be possible to implement SSR, I haven't gotten a chance to take a swing at it yet, but it's definitely on my radar. I'd love to discuss it further if you have any thoughts on the implementation of it.

[amdad]

For now, I'm just beginner in everything. Follower and humble student. That's why Vuetober is much more important for me than you might think. So, no, we cannot talk about SSR because I have really nothing to say. Zero knowledge. :)

I just know, this needs to be done this way or another to make any website SEOable and working without JS. My approach would be goes with classic October way to generate pages. But it's dual work. Dual templating and everything. So it would be great if someone show how to build SSR with October, rather than laravel itself.

But thank you so much for reply. More I know/understand more I like it. I think .vue components way are future of net. But still without prerendering Vue is like heaven for people that have no wings to fly (some do have! 😄)... and other bots ;)

[scottbedard]

Ok fair enough, stay tooned then! As for SEO, I wouldn't sweat it too much. Google announced a while back that their crawlers do in fact execute a page's javascript, so you should be just fine in the meantime :)

[amdad]

Yea, Big Brother do not let go anyone ;)
But still, static page (no js) is a good thing for more reasons. I think you can agree and it's only matter of time... :)

I was thinking all toolset you incorporate with VT was overkill. Not I'm glad I have best practices from start. Thanks again!

[bskimball]

I know you guys are developing this as a vue-cli plugin (I love vue-cli), but did you consider using Nuxt? Nuxt is SSR by default.

[scottbedard]

@bskimball I would love to get SSR working, but haven't looked into this in a while... Does Nuxt play nicely with Laravel now?

[bskimball]

Nuxt has a generate command that produces static pages. It can use axios to pull the content from the rest api then generate a static page based on that content. The downfall would be every time a page is created in October, you would have to re-run the generate command. Of course if you are running a node server, the pages can be generated and queried on the fly, but then you're dealing with node and proxies and so forth.

I have never used october, but I have used laravel, nuxt and vue-cli. The reason I came across this is because I am building my frontend in Nuxt which is great. For the future of the site I am evaluating a backend, which I don't want to re-invent the wheel and create a small cms using laravel.

Edit: I just watched your demo videos, and nuxt would be similar to your set up. For example, in nuxt you just drop a vue file in the pages directory, you don't have to add the route, nuxt does that for you. I am going to set up an october project and test it out.

[amdad]

@scottbedard SSR is cool. But after reading about it more, I see pre-rendering is even better in most cases.
Because we get different website for no-js for some nerds and SEO and full blown app for rest.

If someone want "light" version of website then OK he'll get it through classic October Pages and routing. It's cool we can have super lightweight/classic website just for SEO and hipsters.

I can "Close and comment" the issue, right now, but maybe you want to discuss it further and get this SSR feature on board. For me it would be better to see NEXT version of Vuetober released.

Vue-CLI? Sounds PRO :D

[scottbedard]

@amdad Let's leave it open for now. The 3.x branch is still very new, it's going to take some time to learn what's possible with it and what isn't. Perhaps we can get it to play nicely with vue-cli-plugin-ssr and then we'd be golden! People could just select that plugin while installing, and they'd be good to go.

[amdad]

Any new videos for 3.x branch? :)
It seems more complicated than before.

[bskimball]

vue-cli-plugin-ssr would be cool. It states it as a WIP but anything Akryum does is usually rock solid.

[bskimball]

So, I kind of have this working with nuxt. I haven't tested much but it seems to work so far. The repo is here https://github.com/bskimball/nuxtober if you want to try it out.

[scottbedard]

@amdad Not yet, but there will be. The 3.x branch is way more powerful than 2.x, so once things settle down I plan on making videos to demonstrate all the cool things it can do. And don't worry, it's actually much simpler than 2.x. You no longer have to manage webpack configurations or struggle to keep up with the latest dependencies. It will all just be handled for you by vue-cli.

@bskimball Nice! I can't wait to take a look at this. If you can get it working smoothly, it would be a really cool option to add to the cli plugin! Just check "yes" and boom, you've got Nuxt. That would be an amazing feature!

[amdad]

I'm sure it's more powerful, that's why I was afraid of it's power :) Amazing times for webdev we have. Back in 2009 I was looking for ajax loading pages and asking myself, if it's possible, why everyone don't build 'dynamic' websites? Now it's slowly but steadily become new standard. Cool, very cool.

[Denoder]

been trying to get SSR working with: https://github.com/spatie/laravel-server-side-rendering

[Denoder]

@scottbedard @bskimball I moved to nuxt for the SSR it works wonders. What kind of issues are you facing in terms of getting it to work?

[bskimball]

@teranode are you using the nuxtober theme I started or did you roll your own?

I haven't looked into it for OctoberCMS but Gridsome https://gridsome.org may be a better fit.

[Denoder]

@bskimball
yea i used nuxtober as a base. From what i can see, gridsome is basically the same as Nuxt, but focuses more on the "static site generator" side. So i dont think there would be any difference in using either, plus both their documentations are the same (very vague and barren)

[scottbedard]

To anyone who has been following this issue, I was able to get SSR working inside October with my new Sveltober repository. Perhaps we can use the same technique here, we'll just have to research how compatible it is with vue-cli and the surrounding ecosystem. It would also be nice if we could set up a caching layout around SSR.

[amdad]

Oh, wow, Scott. I was a little bit off from Vue hype. Because I was reading more about pros and cons of SPA itself, and I was also not super happy about loading time of vuetober.

But then someone posted Svelte. And I thought.. Oh, that's cool. Something between two worlds. And you've already did something usable with it. Super cool :)

[scottbedard]

I'm closing this issue for now, as it has been stale for some time without any real progress being made on it. If anyone wants to pursue SSR, I'd love to talk more about getting a vue-cli setup working with it.

For everyone else, I'd recommend using this plugin to achieve many of the same benefits of SSR, without all of the headaches 👍

[Denoder]

Honestly im not even using the CMS module (i disabled it) to work with nuxt/vue. But it still does require a node server :V