Vue — SSR

What is SSR?

Server-side rendering renders Vue components on the server, sending HTML to the browser.

Benefits

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

Nuxt.js

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

Page component

<script setup>
const { data } = await useFetch('/api/users')
</script>

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in data">{{ user.name }}</li>
    </ul>
  </div>
</template>

Data fetching

<script setup>
// Runs on server and client
const { data } = await useFetch('/api/posts')

// Only on server
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts')
)
</script>

Layouts

<!-- layouts/default.vue -->
<template>
  <div>
    <header>Navigation</header>
    <slot />
    <footer>Footer</footer>
  </div>
</template>

Middleware

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  if (!isLoggedIn()) {
    return navigateTo('/login')
  }
})

SEO

<script setup>
useHead({
  title: 'My Page',
  meta: [
    { name: 'description', content: 'Page description' }
  ]
})
</script>

Static generation

# Generate static site
npm run generate

# Output in .output/public

Mini Practice

1. Create a Nuxt app
2. Add server-side data fetching
3. Use layouts and middleware
4. Optimize for SEO

Up Next

Continue with Performance - Optimization tips.