SSR, SSG, PWA, TypeScript, Nitro: discover Nuxt.js, the leading Vue.js framework for high-performance, SEO-optimized web applications. Smile Guide.
Modern web projects combine requirements that seemed contradictory just a few years ago: optimal performance for Core Web Vitals, impeccable SEO for organic search engine optimization, a smooth developer experience and a maintainable long-term architecture.
Nuxt meets all four of these requirements simultaneously. This is what has made it the reference framework of the Vue.js ecosystem, adopted for everything from marketing websites to complex business applications.
This guide explains what the Vue.js framework is, its rendering modes, its key features, and how to deploy it in production.
- Over 14 million downloads per week for the reference Vue.js framework (npmjs.com, 2024)
- Over 14,000 GitHub stars for version 3, which has established itself as the standard for modern Vue.js development (GitHub, 2024)
What is Nuxt.js?
Nuxt.js is an open-source framework based on Vue.js that adds a layer of conventions, tools, and features for building high-performance, well-architected web applications. It handles server-side rendering, static site generation, automatic routing, auto-imports, and deployment on any infrastructure.
Where Vue.js is a library for building interfaces, this framework is opinionated and provides all the necessary structure for a complete production web application.
Relationship with Vue.js: the framework's contributions
Vue.js handles client-side component rendering. This framework wraps it up and adds what's missing for production: server-side rendering, the file system as a router, SEO metadata management, auto-imports of components and composables, and an extensible module architecture.
In summary: Vue.js is the engine. This framework is the complete car.
Comparison with Next.js: key differences
The two frameworks occupy the same position in their respective ecosystems: one is to Vue.js what Next.js is to React. They share the same concepts (SSR, SSG, file-based routing, API routes) but rely on different philosophies.
Vue.js prioritizes simplicity and readability of templates. React prioritizes flexibility and a purely JavaScript-based approach. The choice between the two often depends on the initial choice between Vue and React.
The architecture of version 3: Nitro, Vite, Vue 3
The third major version is based on three technological foundations.
Nitro is the integrated universal server. It allows you to deploy an application to any environment: Node.js, Deno, Bun, Cloudflare Workers, Vercel Edge, Netlify, or a traditional server. This server automatically detects the deployment environment and optimizes the build accordingly.
The bundler and development server are fast . They offer near-instant startup and ultra-fast HMR (Hot Module Replacement), regardless of project size.
Vue 3 with the Composition API is the core of components. It brings better performance, improved TypeScript inference, and reusable composables.
Rendering modes
This is one of the framework's most distinctive strengths: the flexibility of rendering modes, which can be configured globally or by route.
SSR: Server-Side Rendering
Server-side rendering generates the HTML for each page on the server with each request. The browser receives complete HTML, which is immediately indexable by search engines and displayed without waiting for JavaScript to execute.
This is the ideal mode for applications with dynamic content that changes frequently, pages requiring authentication or personalization, and any project where SEO on fresh content is critical.
SSG: Static Site Generation
Static generation pre-generates all pages at build time. The result is a set of static HTML files served directly from a CDN, without a server.
This is the most efficient and least expensive mode to operate. It is ideal for sites whose content changes infrequently (documentation, blog, marketing site) and which require maximum performance.
SPA: Single Page Application
SPA mode disables server-side rendering. The entire application runs on the client side. This is the traditional behavior of Vue.js.
This mode is suitable for applications behind authentication where SEO is not a priority, or for internal tools and dashboards.
Hybrid rendering: by road
Version 3 allows you to configure the rendering mode route by route via route rules. A homepage can be SSG, product pages SSR, and the customer area SPA. This fine-grained control is one of the most powerful features for complex projects.
Quick Decision Guide
Fashion | Ideal use case | Performance | SEO | Infrastructure cost |
SSR | Dynamic, personalized content | Very good | Excellent | AVERAGE |
SSG | Static website, blog, documents | Excellent | Excellent | Very low |
SPA | Authenticated app, dashboard | Good | Weak | Weak |
Hybrid | Complex mixed-use projects | Optimal | Excellent | AVERAGE |
Key features of version 3
Auto-imports and composables
The framework automatically imports components, composables, and utilities without requiring an explicit import declaration. A component placed in the components directory is immediately available in all templates. A composable in the composables directory is accessible everywhere without manual import.
This feature significantly reduces the boilerplate and improves code readability.
Automatic routing based on files
Each file in the pages directory automatically becomes a route. pages/index.vue corresponds to /, pages/blog/[slug].vue corresponds to /blog/:slug. No router configuration is required.
Modules: the extensible ecosystem
Modules extend the framework's functionality via a standardized API. The official and community ecosystem covers image optimization, internationalization, Markdown content, authentication, advanced SEO, and dozens of third-party integrations.
Native TypeScript
The framework is written entirely in TypeScript and automatically generates types for routes, composables, and APIs. Type inference covers the entire project without manual configuration.
Progressive Web App (PWA) with Nuxt
A Progressive Web App (PWA) is a web application that adopts the behaviors of a native application: installation on the home screen, offline operation via Service Worker, push notifications and instant loading.
The @vite-pwa module integrates PWA capabilities into any Vue 3 application with minimal configuration, automatically generating the Service Worker, manifest, and icons.
Performance and SEO
Core Web Vitals and Optimizations
The framework automatically optimizes several Core Web Vitals metrics. Automatic code splitting reduces the initial JavaScript load.
Lazy loading of components and images reduces LCP. Prefetching of visible routes improves perceived navigation. These optimizations are enabled by default without configuration.
Metadata management with useHead
The useHead composable allows you to define meta tags, titles, canonical links, and structured data for each page in a declarative and reactive manner. Combined with SSR, this metadata is included in the initial HTML submitted to search engines.
Automatic image optimization
The image optimization module automatically optimizes visuals: conversion to WebP/AVIF, resizing according to the viewport, native lazy loading, and generation of srcset attributes. A single dedicated tag replaces dozens of lines of manual optimization.
Lazy loading and code splitting
The architecture automatically divides the JavaScript bundle by route. Each page loads only the JavaScript it needs. Components marked as lazy are loaded on demand, reducing the initial JavaScript to its bare minimum.
Deploying a Vue.js application with this framework
Vercel and Netlify: frictionless deployment
Vercel and Netlify automatically detect projects and configure the optimal deployment. A push to the main branch automatically triggers the build and deployment. Branch previews allow you to test each pull request in an isolated environment.
Self-detection with Nitro
The Nitro server automatically detects the target deployment environment and adapts the build accordingly. On Vercel, it generates edge functions.
Netlify offers serverless functionality. A Node.js server provides a standard HTTP server. This portability eliminates infrastructure vendor lock-in.
On-premise and sovereign deployment
The framework can be deployed on any Linux infrastructure with Node.js. For organizations with sovereignty constraints, on-premises deployment or deployment on a SecNumCloud-certified sovereign cloud is entirely possible. The SSG mode produces static files deployable on any web server without Node.js.
Smile and Nuxt.js: our Vue expertise
At Smile, we have been developing Vue.js applications in production using this framework since its earliest versions. Our expertise covers e-commerce projects, institutional portals, business applications, and high-traffic websites with critical SEO requirements.
We support our clients in choosing the rendering method best suited to their constraints, setting up the application architecture, integrating with headless backends (Strapi, Directus, business APIs) and deploying on production infrastructures.
Our expertise is recognized by our dedicated technology page and our active participation in the French-speaking Vue.js ecosystem.
Are you looking to develop your next Vue.js project? Discover our expertise in Nuxt.js development .
Frequently Asked Questions about Nuxt
Should we migrate from version 2 to version 3?
Version 3 has been the standard since 2022 and incorporates all future developments of the framework. Version 2 is under maintenance until December 2024. For new projects, version 3 is the only relevant choice. For existing projects, migration is recommended but can be gradual thanks to the compatibility bridge.
Is this framework suitable for e-commerce projects?
Yes. Hybrid mode is particularly well-suited to e-commerce: catalog pages can be SSG for maximum performance, product pages SSR for fresh content, and the shopping cart SPA for instant interaction. Integration with headless commerce backends (Shopify Storefront API, Magento, WooCommerce via API) is native.
What is the difference between useAsyncData and useFetch?
`useFetch` is a shorthand for `useAsyncData` that combines the cache key definition and the fetch call into a single line. `useAsyncData` offers more control for advanced use cases (data transformation, custom cache keys, reactive dependency management). For most API calls, `useFetch` is sufficient and more concise.
Can this framework be used with a headless CMS?
Yes, it's actually one of its most common uses. It integrates natively with all headless CMSs via their APIs (Strapi, Directus, Contentful, Sanity, WordPress REST API). The content module also allows you to manage Markdown content directly within the project, without an external CMS.