Image

nuxtjs

Rendering mode

SSR or full static ?

2 min read
Last update: November 28, 2021

About configuration

More about

Server-Side Rendering - SSR

nuxt.config.js
export default {
  ssr: true, // default to 'true'
  target: 'server', // default to 'server'
}

You need to use yarn build to compile and yarn start to serve application, on server your can use PM2 to execute this and NGINX with reverse proxy.

Static Site Generation - SSG

nuxt.config.js
export default {
  ssr: true, // default to 'true'
  target: 'static',
  generate: {
    crawler: true, // default to 'true'
    routes: getGeneratedRoutes, // Optional for generate async routes, see below
  },
}

You need to use yarn generate to compile and you can server directly dist/ directory with NGINX configuration or yarn start on your local to serve it.

Single Page Application - SPA

Nuxt won't compile code, just create HTML page with Ajax call for each page, it's really slow and not useful for production.

nuxt.config.js
export default {
  ssr: false,
  target: 'static',
}

About generated routes

I use often nuxt/content into my project and I use a route with wildcard to get content directly from file architecture into content dir

nuxt.config.js
// Create a new js file to get all async routes
import { getGeneratedRoutes } from './plugins/routes/routes'

export default {
  ssr: true, // default to 'true'
  target: 'static',
  generate: {
    crawler: true, // default to 'true'
    routes: getGeneratedRoutes, // Optional for generate async routes, see below
  },
}

Here, an example to generate all routes

plugins/routes/routes
import { $content } from '@nuxt/content'
require('dotenv').config()

export const getGeneratedRoutes = () => {
  // eslint-disable-next-line no-async-promise-executor
  return new Promise(async (resolve, reject) => {
    const routes = []
    const types = ['/development', '/games']
    types.forEach((route) => {
      routes.push(route)
    })

    const guides = await $content('documentation', { deep: true })
      .only(['path', 'slug', 'created_at'])
      .sortBy('category')
      .fetch()

    for (const guide of guides) {
      const route = `${guide.path}`
      routes.push(route)
    }

    const notes = await $content('notes', { deep: true })
      .only(['path', 'slug', 'created_at'])
      .sortBy('position')
      .fetch()

    for (const note of notes) {
      const route = `${note.path}`
      routes.push(route)
    }

    resolve(routes)
  })
}