Vue.js: What is server-side rendering (SSR) in Vue?

SSR — renders Vue on the server.

Benefits:

• Better SEO.
• Faster initial load.
• Social media previews.

How it works:

• Server renders HTML.
• Client hydrates HTML.
• Interactive SPA after hydration.

1<!-- Nuxt 3 - SSR by default -->
2<script setup>
3const { data } = await useFetch("/api/posts")
4// Rendered on server + client
5</script>
6
7<!-- Disable SSR for specific page -->
8<script setup>
9definePageMeta({
10    ssr: false
11})
12</script>

Trade-offs:

• More complex setup.
• Server costs.
• hydration mismatch possible.