Vue 3 SSR with Nuxt 3 Complete Guide

By Kokil Thapa | Last reviewed: September 2026

You want Nuxt.js SSR without SSH, systemd, or Dockerfiles. The practical answer is a managed platform that runs Nitro — Nuxt 3's server engine — as serverless or edge functions. Vercel, Cloudflare Pages, Netlify, and NuxtHub all fit that model. You push Git, they build with nuxi build, and they keep Node alive for you. This Vue 3 SSR with Nuxt 3 complete guide starts there because that is the query most teams actually search. If you are weighing frontend architecture first, read how single page apps compare to multi-page sites for SEO before committing to SSR.

What Hosting Platform Handles SSR for Nuxt.js Without Me Managing Servers or Docker?

Any host that natively supports Nitro output counts. Nuxt 3 does not ship static HTML alone in SSR mode. It builds a server bundle under .output/ that must execute on every uncached request. Managed platforms absorb that work.

Best Managed Options in 2026

Vercel remains the path of least resistance. Push to GitHub, import the repo, and Nuxt auto-detects. Cloudflare Pages wins when your audience is global and you want edge rendering without a Mumbai-region VPS. For a deeper platform comparison outside Nuxt, see Cloudflare Pages vs Netlify vs Vercel and DigitalOcean App Platform vs Droplets.

Minimum Config for Serverless Hosting

Set the Nitro preset to match your host. Without this, the build may target Node-only output that the platform cannot run.

<script lang="ts">
// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'vercel' // or 'cloudflare-pages', 'netlify', 'railway'
  }
})
</script>

Official deployment targets are documented on Nitro's deploy guide and the Nuxt deployment docs. Pin the preset per environment if staging and production use different hosts.

When You Still Need a VPS

Serverless Nuxt SSR hits limits with long-running WebSockets, heavy CPU per request, or strict data-residency rules. Railway and Render give you a managed Node process without writing Dockerfiles. A plain Ubuntu VPS still costs less at steady traffic. For Nepal audiences, pick a region close to users — see choosing a cloud region for Nepal users. Need help picking stack and host together? Domain registration and hosting services cover that planning step.

How Do You Configure Vue 3 SSR with Nuxt 3 for Production?

Nuxt 3 defaults to universal SSR. Production readiness means explicit nuxt.config.ts rules for rendering mode, caching, and secrets. Treat this file as infrastructure code, not app logic.

Setting Rendering Modes and Route Rules

Not every route needs SSR. Marketing pages can pre-render. Dashboards should stay client-only.

<script lang="ts">
// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  routeRules: {
    '/': { prerender: true },
    '/about': { prerender: true },
    '/products/**': { swr: 3600 },
    '/dashboard/**': { ssr: false },
    '/old-blog/**': { redirect: '/blog/**' }
  },
  nitro: {
    preset: 'vercel',
    compressPublicAssets: true,
    minify: true
  }
})
</script>

The swr (stale-while-revalidate) rule serves cached HTML instantly while refreshing in the background. That helps e-commerce catalogs during festival traffic spikes in Nepal. Hybrid rendering is why SSR still beats pure SPA for public pages — see client-side vs server-side rendering for the trade-off chart.

Environment-Specific Configuration

Never expose API secrets to the browser bundle. Split private and public runtime config.

<script lang="ts">
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    databaseUrl: process.env.DATABASE_URL,
    paymentSecret: process.env.PAYMENT_SECRET,
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'https://api.example.com',
      gaId: process.env.NUXT_PUBLIC_GA_ID
    }
  }
})
</script>

This mirrors Laravel .env patterns. When Nuxt talks to a Laravel API with eSewa or Khalti, keep payment keys in the private block only. A common mistake is putting secrets in runtimeConfig.public — they ship to every browser.

What Is the Correct Data Fetching Pattern in Nuxt 3 SSR?

Most SSR bugs come from data fetching. onMounted and plain fetch run only in the browser. That breaks server rendering and causes hydration mismatches.

Using useAsyncData vs useFetch

• useFetch — HTTP calls to external APIs or Nitro server routes. Handles loading, errors, and cache keys.
• useAsyncData — Any async work: DB queries, SDK calls, complex transforms.

<script setup lang="ts">
const { data: products, pending, error } = await useFetch('/api/products', {
  query: { category: 'electronics' },
  transform: (response) => response.data.map(p => ({
    id: p.id,
    name: p.title,
    price: p.price_npr
  }))
})

const { data: userStats } = await useAsyncData('user-stats', () =>
  $fetch('/api/analytics/user-summary')
)

// WRONG: browser-only, causes hydration mismatch
onMounted(async () => {
  const res = await fetch('/api/products')
  products.value = await res.json()
})
</script>

During SSR, data runs once and serializes into __NUXT_DATA__. The client reuses it without refetching. Validate API payloads during development with a JSON formatter before they reach production pages.

Handling Authentication and Cookies

Server-side requests do not carry browser cookies automatically. Forward them explicitly.

<script setup lang="ts">
const headers = useRequestHeaders(['cookie'])

const { data: profile } = await useFetch('/api/me', {
  headers,
  server: true
})
</script>

This matters for membership sites and legal-tech portals where personalized content must render server-side for crawlers. Without cookie forwarding, SSR shows a logged-out page while the client shows authenticated data — a classic hydration error.

How Does Nuxt 3 Compare to Other Vue SSR Solutions?

Nuxt 3 bundles routing, data serialization, and Nitro into one toolchain. Manual Vite SSR gives full control at the cost of glue code.

For most Vue teams, Nuxt 3 is the fastest route to SSR plus managed hosting. Manual Vite SSR suits embedded rendering inside an existing app. Nuxt builds on Vite 8.x under the hood — see Vite vs Webpack for frontend builds for why that matters.

How Do You Optimize SEO and Metadata in Nuxt 3?

SSR alone does not rank pages. Crawlers still need titles, descriptions, canonical URLs, and structured data in the initial HTML response.

Dynamic Page Metadata

<script setup lang="ts">
const { data: article } = await useFetch('/api/articles/vue-ssr-guide')

useSeoMeta({
  title: () => article.value?.title || 'Default Title',
  description: () => article.value?.excerpt || 'Default description',
  ogTitle: () => article.value?.title,
  ogDescription: () => article.value?.excerpt,
  ogImage: () => article.value?.featured_image,
  twitterCard: 'summary_large_image'
})

useHead({
  script: [{
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: article.value?.title,
      author: { '@type': 'Person', name: 'Kokil Thapa' },
      datePublished: article.value?.published_at
    })
  }]
})
</script>

Structured data helps legal directories and service sites earn rich snippets. Validate markup before launch. Read SEO for single-page applications and Core Web Vitals optimization for the full performance picture.

Canonical URLs and Duplicate Content Prevention

<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()

useHead({
  link: [{
    rel: 'canonical',
    href: `${config.public.siteUrl}${route.path}`
  }]
})
</script>

Canonical tags stop duplicate indexing from query strings and UTM parameters. For NPR and USD product variants, point canonicals at the primary URL unless each locale targets a distinct market.

How Do You Deploy Nuxt 3 SSR When You Manage Your Own Server?

Managed hosting covers most teams. When traffic is steady or compliance requires self-hosting, you run Nitro as a Node process behind Nginx. That is more ops work — the opposite of the no-Docker goal — but it costs less at scale.

Build and Output Structure

Run npx nuxi build. The artifact lives in .output/:

• .output/server/index.mjs — Node entry point
• .output/public/ — Static assets
• .output/nitro.json — Runtime metadata

Copy .output/ to the server and run node .output/server/index.mjs. No source tree or dev dependencies required on production. A real booking platform like Adventure Third Pole Trek uses Laravel + Livewire instead of Nuxt — a valid choice when your team already runs PHP in production.

Process Management and Reverse Proxy

Use PM2 or systemd for the Node process. Put Nginx in front for TLS and static files.

# /etc/nginx/sites-available/nuxt-app
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location /_nuxt/ {
        alias /var/www/nuxt-app/.output/public/_nuxt/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

This mirrors Laravel behind Nginx. Serving /_nuxt/* from disk cuts Node load by 60–80% on typical sites. See deploy Laravel on Ubuntu VPS with Nginx and Nginx vs Apache for PHP sites for the same reverse-proxy pattern on PHP stacks.

Platform-Specific Presets

Nitro supports 20+ deployment targets. Match the preset to your host.

<script lang="ts">
// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'vercel'
    // preset: 'cloudflare-pages'
    // preset: 'netlify'
    // preset: 'aws-lambda'
    // preset: 'node-server'  // self-hosted VPS only
  }
})
</script>

Each preset changes output format and cold-start behavior. For Nepal startups on tight budgets, serverless free tiers beat a VPS until traffic becomes constant. Compare Cloudflare Workers vs AWS Lambda if you outgrow the first host.

Key Takeaways

• Vercel, Cloudflare Pages, Netlify, and NuxtHub run Nuxt.js SSR without Docker, VPS, or PM2 — connect Git and set the Nitro preset.
• Match nitro.preset to your host before the first production deploy; wrong presets produce unrunnable builds.
• Use useFetch and useAsyncData for all SSR data — never rely on onMounted for initial page content.
• Apply routeRules to mix prerender, SWR cache, and SPA-only dashboard routes in one project.
• Set useSeoMeta, canonical URLs, and JSON-LD in every public page so crawlers see complete HTML on first request.
• Self-hosted VPS plus Nginx still saves money at steady traffic, but managed serverless is the default for new Nuxt SSR launches.

People Also Ask

Can I run Nuxt 3 SSR on shared hosting?

Standard PHP shared hosting cannot run Nuxt SSR. You need Node.js support or a managed platform. Most cPanel plans in Nepal lack persistent Node processes. Use Vercel or Cloudflare Pages instead, or upgrade to a VPS with Node 26 LTS.

Does Nuxt 3 SSR work on Cloudflare free tier?

Yes. Set nitro.preset to cloudflare-pages or deploy via NuxtHub. Workers run your Nitro server at the edge. Watch CPU time limits on heavy SSR pages — cache with routeRules.swr when possible.

Is Vercel the best host for Nuxt 3?

For most projects, yes. Vercel maintains first-class Nuxt integration and auto-detects settings. Choose Cloudflare if edge latency to South Asia matters more than dashboard familiarity. Choose a VPS only when serverless limits or cost at scale demand it.

Do I need Docker to deploy Nuxt 3?

No. Managed platforms build and run Nitro for you. Docker helps only when your team standardizes on containers across environments or deploys to Kubernetes. The nitro.preset: 'docker' option exists but is optional, not required for SSR.

Ship Nuxt SSR Without the Ops Overhead

The fastest path to Nuxt.js SSR without managing servers or Docker is a managed Nitro host: push code, set the preset, configure routeRules and data composables, and let the platform run the server. Keep VPS deployment in your back pocket for cost or compliance, not as the default. Page speed still affects rankings after deploy — read how website speed impacts SEO in Nepal. Prefer staying in Laravel instead of Nuxt? The Livewire tutorial for Laravel developers covers a server-rendered alternative without a separate Node fleet. Ready to plan hosting, frontend stack, and launch together? Contact us about your Nuxt or full-stack project. You can also reach out directly to discuss requirements or explore web development services in Nepal.