Search code examples
vue.jsnuxt.jsvuexserver-side-renderingstrapi

target: 'static' does not pre-render in nuxt


I do have a Nuxt app where I fecth the contents from an API in nuxtServerInit() inside the store.

However, if I do generate the a static version setting target: "static" inside nuxt.config.js, the contents are nor pre-rendered in the pages, while is I set it "universal", then they are.

Isn't 'static' the right setting if you want to go full static?

Here is my nuxt.config.js file

// import colors from 'vuetify/es5/util/colors'

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  // target: process.env.NODE_TARGET === 'static' ? 'static' : 'server',
  // ssr: true,
  target: 'universal',
  router: {
    base: '/wip/roboat-website/roboat-frontend/dist',
    routeNameSplitter: '/'
  },
  server: {
    host: "localhost" // default: localhost
  },
  head: {
    titleTemplate: '%s - roboat-frontend',
    title: 'roboat-frontend',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/custom.css'
  ],
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/vuetify
    ['@nuxtjs/vuetify', { treeShake: true }]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},
  env: {
    NUXT_ENV_API_HOST: process.env.NUXT_ENV_API_HOST,

  },
  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    optionsPath: './vuetify.options.js',
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    // defaultAssets: false,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        minifyURLs: true,
        removeComments: true,
        removeEmptyElements: true
      }
    },
    // analyze: true,
    optimizeCSS:true,
    extractCSS: true,
    babel: {
      plugins: [
        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
      ]
    },
    extend(config, { isDev, isClient }) {
      // ..
      // if (isClient) {
      config.module.rules.push({
        test: /\.(obj|mtl|fbx|gltf|glb|hdr|bin)$/,
        loader: 'file-loader'
      })
    },
    transpile: [
      "three"
    ]
  },
}

Solution

  • It looks like that at the end, OP do have a working code with target: 'static' and ssr: true.
    This seems legit, since it is the recommended (and up to date) way of doing things: How to setup Nuxt for an isomorphic universal app?