14

I just got started with SvelteKit and read the documentation. I would like to use SSG in my app and prerender every page. I configured my app as the documentation said but nothing seems to work as described.

What I want to achieve:

1. SSG (Prerender)

Generate static content (e.g. <h1>,<p>) into HTML at build time. Don't hydrate the pages on client-side with JS. I want to avoid that as much as possible, it adds load time, some users have JS disabled and it isn't friendly with SEO. I don't really see any benefits to why would you do that. Generating data with JS is only good when the data is changing, right? I also can't see any difference between "no hydration" and "prerendering."

2. Disable SSR

Do not run code on server and render pages or request. So then I can assume localStorage etc. is available.

3. Open app without the use of node server

This one is not that important, but it would be nice if the app would work just by opening the index.html file in my browser locally. It would work with Github Pages then. Kinda how you can after building an app written in pure Svelte.

4. SvelteKit only

Would be nice if just configuring SvelteKit is enough. Without any help of an external library or different Svelte framework.

What I tried

here is an example on github. In the first directory is a reproducible example with the build generated. In the second is roughly the output I expect the build to give me which I wrote manually.

I started new SvelteKit project and installed static adapter via npm i -D @sveltejs/adapter-static@next. Then I setup svelte.config.js file:

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: adapter(),
        ssr: false,
        hydrate: false,
        prerender: {
            crawl: true,
            enabled: true,
        }
    }
};

export default config;

Since I turned off ssr globally I assumed it is safe to use localStorage. So I used it in external script that I imported(store.js). But when building I got this error message: SvelteKit Error when Building

I also noticed it say "building SSR bundle", I wonder why that is...

When I look at the build every element is still rendered with JS and just opening it in browser won't work.

This is all I wanted to say, thank you for reading and for your help!

Edit1: Kinda figured out the first part.
Hydration only renders content that is necessary. So other can be prerendered into HTML. The client-side router is the main cause to rendering with JS. So I enabled hydration and disabled router. But when starting app nothing would show up. So I had to enable ssr (Even tho I don't want to).
This is how the svelte.config.js changed:

ssr: true,
hydrate: true,
router: false

Now the content is generated how I wanted to but ssr is enabled.

Matyanson
  • 301
  • 2
  • 8

1 Answers1

2

According to your screenshot I assume you have used the "localStorage" in your SvelteKit load function in the "module" script tag which does not work, because during build-time you don't have any access to browser related APIs.

So you should move this part of your code to the client-side.

See also: https://kit.svelte.dev/docs#loading

obcomv
  • 178
  • 1
  • 6