Vuetify-nuxt with SSR?

Live Demos
1

Hi Mythz,

Loving the nuxt demo - I’ve learnt a lot about the client side dev process studying it, so thanks!

One of the main reasons I wanted to use Nuxt was to achieve an SEO optimised SSR website - I was surprised to find your demo didn’t feature SSR, which I thought was the main selling point of Nuxt. Is there a technical reason why you didn’t do this? Do you have plans to release a demo with this shortly?

Thanks!

Richard.

2

Hi,

I see that if I change mode to ‘universal’ from ‘spa’ in nuxt.config.js it seems to do SSR.

Thanks

3

Using Nuxt’s SSR mode would require a node.exe process to do the SSR which isn’t ideal if you’re not all node. We use Nuxt’s spa mode which pre-generates optimal static assets that can be served on a static server/CDN whilst ServiceStack handles the server APIs.

So our Nuxt templates are instead configured use Nuxt’s SPA mode where it’s statically generated assets can be deployed with your .NET Web App or for even greater performance deployed the generated assets in /wwwroot can be deployed to a CDN like Netlify which can be configured to use a custom proxy to transparently proxy API Requests to your backend .NET Server without it needing CORS enabled.

4

I’m developing a site that relies heavily on SEO with a lot of user dynamic content that will be loaded through the API. Given that scenario, do you have a recommendation for setup that employs SSR whilst leaning on SS for backend? Is is just a case of having to fallback to two different processes?

5

If it was a requirement to generate Server html I’d stick to one of the Website Templates my personal preference would be to use http://templates.servicestack.net template because I prefer not to use Razor but I’d still use ServiceStack.Razor over MVC Razor for its reduced ceremony in not having to create MVC Controllers.

Using node.exe is still an option, but I have an aversion to complexity and prefer to use the minimal moving parts necessary.

1 Like
6

I’ve been down this road on a few projects. I think the Templates or ServiceStack.Razor option is very good, proven, solid. So the following is just in case you want to explore the Nuxt ssr option further. One of the projects I have going on right now leverages Nuxt ssr (universal mode) with vuetify with a ServiceStack api … We use vue-kindergarten for guarding routes (route, role and resource based), axios for xhr, vee-validate, vue-i18n, vuex, a few other libs, and plan to use ServiceStack sse in several places as well. Our nuxt config leverages @nuxtjs/proxy … We do most of our ajax calls in vuex store actions. For auth, we use ServiceStack auth (credentials, basic and jwt).

...
  modules: [
    '@nuxtjs/proxy',
    '@nuxtjs/axios'
  ],
  proxy: {
    '/api': {
      target: 'https://api.our-servicestack-project-api-here.org',
      pathRewrite: { '^/api': '' }
    }
  },
  axios: {
    errorHandler (error, { store }) {
      ... // store commit stuff here
      return Promise.reject(error)
    }
  }
...

There’s been no issue with integrating the two, it’s been seemless. It can be a perfect setup when it makes sense. I also use Nuxt in SPA mode on other projects and it works great as well.

2 Likes
7

@mjc ,

That sounds like the ultimate setup from my perspective. Any further comments since Feb? I don’t suppose you’ve a starter template or the like?

Cheers

8

@richard you might have already seen it (did I miss a link??), but here is a video and GitHub page of the demo using a Mac, VS Code, Nuxtjs, and ServiceStack.net. Video is 10 months old, but the last GitHub commit was Dec 2017.

@mythz FYI: We’re also looking into doing a VS Code, NuxtJS, ServiceStack.NET project with SSR in the next 4 to 6 months. Maybe another demo using that combination? We’ll be using Windows instead of Mac tho, but if portable to both the better. One of the reasons why were looking at that combination.

1 Like
9

@cthames If you haven’t already check out the Nuxt .NET Core 2.0 templates, they’re nicely integrated with ServiceStack. Although they use Nuxt’s SPA mode (not SSR) so it has the productivity of Nuxt but doesn’t use a node process to generate the SSR html on the server.

All ServiceStack .NET Core templates are cross-platform, we primarily develop on Windows and deploy all our .NET Core Apps to Linux, but cloning git projects and developing on OSX with VS Code also works as expected.

10

Thanks Matt, really appreciate the steer. I’m trying out vue-kindergarten now on your recommendation.