Hacker News Reader

Comment by rajangdavis | Hacker News Reader

I tried nuxt (a vue framework) the other day and was disappointed. It seemed like a very straightforward way to create a UI over a REST backend, but I kept getting stuck with the issue of how to have a clean separation of the back end and front end responsibilities.

For example, I wanted to have a UI that was rendered based on the JSON payload that would get committed to a Vue Store. I consistently ran into issues where Vue would complain about the client rendered code differing from the server rendered code.

Are there any js frameworks where you can specify which components are rendered on the server and which are clientside?

View on HN

Strapi just released their tutorial on nuxt and other backend stuff.

https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-v...

I appreciate the share, but looking at this example(https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-v...) it appears that they are employing a pattern that I do not want.

I want to be able to have essentially have everything server rendered with reactive views. Not sure if there is anything that supports that, but I feel like that's how a SPA "should" work to an extent.

Also, what gets really weird is if you are trying to use environmental variables. The solution is to inject your environmental variables into the client (https://nuxtjs.org/api/configuration-env/) which is what I want to avoid.

I can do what I want to an extent with Ruby and Sinatra, I just want to avoid setting up webpack and babel for getting the reactive components.

I haven't used nuxt, but this vuejs component "hides" the wrapped component during server render:

https://github.com/egoist/vue-no-ssr

Regarding the "client/server render results do not match" issues: Fixing these is mostly easy in my experience, especially since vue will log the offending dom nodes to the dev console.

To clarify, this is not quite what I am looking for.

My challenge is that I don't want everything to be rendered on the client. I only want very specific things to be client rendered and nuxt does not have a way to do this (I think).

The no-ssr thing is the opposite of the functionality that I would like. I want to have the ability to declare which pieces are only server rendered and sprinkle in in client-side rendering where it makes sense.

With Nuxt, use the <no-ssr> component: https://nuxtjs.org/api/components-no-ssr/

All my similar issues went away after discovering that.

This the exact opposite of what I am looking for; I want to be able to have components and pages that are rendered on the server side only

Reply on news.ycombinator.com