Nuxt•2y ago

How to do Static Site Generation with no JS on the client side in Nuxt 3

Hi there! I would like to know if it's possible to use nuxt generate to create a static html version of my app, without any JS on the client side. Right now when I generate the app it will include JS to (I think) hydrate the client side JS over the generated html. I would like to generate just HTML and CSS. My content will be fetched from an API. So considering this nuxt example page:

<script setup>
// pages/index.vue
const posts = await $fetch("https://jsonplaceholder.typicode.com/posts");
</script>

<template>
    <ul>
        <li v-for="post in posts" :key="post.id">
            {{ post.title }}
        </li>
    </ul>
</template>

<script setup>
// pages/index.vue
const posts = await $fetch("https://jsonplaceholder.typicode.com/posts");
</script>

<template>
    <ul>
        <li v-for="post in posts" :key="post.id">
            {{ post.title }}
        </li>
    </ul>
</template>

I would like to generate this static HTML version:

<html>
    <head>
    ...
      <!-- 0 scripts injected here! -->
    </head>
    <body>
        <ul>
            <li>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</li>
            <li>qui est esse</li>
            <li>ea molestias quasi exercitationem repellat qui ipsa sit aut</li>
            <li>eum et est occaecati</li>
            (...etc)
        </ul>

        <!-- 0 scripts injected here! -->
    </body>
</html>

<html>
    <head>
    ...
      <!-- 0 scripts injected here! -->
    </head>
    <body>
        <ul>
            <li>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</li>
            <li>qui est esse</li>
            <li>ea molestias quasi exercitationem repellat qui ipsa sit aut</li>
            <li>eum et est occaecati</li>
            (...etc)
        </ul>

        <!-- 0 scripts injected here! -->
    </body>
</html>

Is this possible?

6 Replies

Julien•2y ago

Hi 👋 this can be done with experimental.noScripts set to true in your config

JelmerOP•2y ago

Thanks! Didn't know that existed. So... It's experimental? What does that mean?

Julien•2y ago

yes, uuh.... that's something experimental ?

JelmerOP•2y ago

I mean more like; whats the context. Why is experimental, will it become non-experimental, if so, when? Etc. I ask this because I'm looking at using this feature for a big client and I can't sell it if it's "experimental"

Cue•2y ago

It is experimental because it’s unfinalized, subject to significant changes, with no guaranteed release let alone come with a release date. There may not be enough feedback on its usage to warrant a stable release. And so on. You could ask a team member, maybe they’ll have a better steer on its stability. I certainly wouldn’t sell it to a client.

JelmerOP•2y ago

Allright, that's what I wanted to know. Thanks!

Gaming

Programming

How to do Static Site Generation with no JS on the client side in Nuxt 3