0

If I build a site with Nuxt with SSR, how would I allow the user to interact with the site - for example, a like button, traditionally I would do this as vue component that would use axios to hit the server.

Can client side interaction still take place within an SSR app - if so - how?

Improve this question

1 Answer 1

Reset to default
2

You would handle this the exact same way a Vue app would handle it.

All that SSR does is pre-renders the pages HTML content, which is normally done for SEO reasons. Once the browser receives this pre-rendered content, Vue/Nuxt goes through the hydration process to bootstrap the app.

From then on, the application behaves exactly as a normal Vue or Nuxt application would. You can create a button with an @click handler, call a method, and have that method post to your server.

The only tricky thing you need to be aware of is that when rendering server side, the process does not have access to the window object, so attempting to directly reference it, or using plugins/libraries that reference it, is a big nono. For these, you'd need to use <no-ssr></no-ssr>, or check that window exists.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you for your answer. So in a NON SSR page, just an empty Vue targeted app container would be passed back (then populated client-side), am I correct in saying that with SSR the entire HTML is passed back from the server and Vue then does some magic to attach itself to create the interactive elements? If I have a number of interactive elements does SSR still make sense?
That is exactly right. SSR essentially does the same work that a Vue SPA does, but instead of rendering the HTML client side, it renders it server side. Having a lot of interactivity on a page makes no difference as to whether it's SSR or not. The main factors that go into deciding to use SSR come down to SEO, hosting (you may already have a server), or indexing large amounts of user generated content. There's other factors, but those are usually the biggest.
Thanks, I've read about the SEO and server requirements, but could you elaborate on "or indexing large amounts of user generated content". Also, so hydrating an SSR page with Vue functionality is "normal"? Or is it the case that if you need front end interactive user functionality you should render the entire thing client side? Thanks!
Sure! If you have a large amount of users posting content (just one example), such as a site like Stack Overflow, and want the context indexed by search engines, then using static site generation doesn't hold up. You'd have to rebuild the site on every change to the data. This is where SSR shines, as you can look up the data and render it dynamically server side.
Hydrating is a completely normal, and automatic, function in nuxt. You can read a bit about it here: ssr.vuejs.org/guide/hydration.html, however, this is in the context of Vues own SSR library. Nuxt does basically the same thing though, and it all happens under the hood.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.