Adapter-static (SPA) output for dynamic routes

[PH4NTOMiki]

Describe the problem

If a route is /[slug]/edit.svelte and the app uses SPA mode(fallback in config) what would happen is that page would use fallback page for that route because is has a dynamic slug.

Kinda related: #4158

Describe the proposed solution

Adapter should render a page /slug/edit.html or something like that and make adapter specific configuration for rewrites.

Alternatives considered

Stay as is

Importance

nice to have

Additional Information

No response

[Conduitry]

At that point, you're essentially making an adapter for a specific host. The static adapter is supposed to work across many static file hosts, and I don't know what else that means we could do besides have a bunch of files for specific routes and then a single fallback file.

[PH4NTOMiki]

I understand that, but i'm suggesting we should add config option(opt-in) for dynamic routes to still be rendered to file, so users can MANUALLY make rewrites for specific service they're using, in that case fallback would (at least for some use-cases) be unnecessary. That way we could render different link preloads for all routes, so the loading happens quicker for SPA apps, like I suggested in #4158 .

Sorry for the uppercase there.

[johnnysprinkles]

I'd like to understand more about this one, sounds like it may be similar to issues I've filed.

In your example, could you just add /slug/edit to prerender.entries in svelte.config, which would spit out a build/_app/slug/edit.html file? (or edit/index.html, not sure what it's doing these days). Not sure what you mean about having adapter static make specific configuration for rewrites, wouldn't any rewriting be up to you? I did file a request (#1824) awhile back to expose the route information in JSON to make it easier to programmatically generate such rewrites, but it didn't get much interest.

[silasabbott]

Gridsome does this. It fetches data from your CMS at build time and then renders each page statically.

[Rich-Harris]

I'll be honest, I don't understand what's being suggested here

[Badlapje]

Do i understand it correctly from the above initial post that dynamic routes are not possible when using the static-adapter in SPA mode?

I can't seem to get that to work, if it's impossible that'd explain why 😱

[mrkishi]

The issue as far as I understand it:

With adapter-static we can prerender both specific pages /foo/actual-slug.html and a generic fallback fallback.html. All non-prerendered dynamic routes must use the generic fallback to bootstrap the app. At that point, everything happens at runtime—the app and router must be initialized before the route's chunks can even begin being fetched.

The feature proposal is the client-side equivalent of the per-route serverless functions: users would be able to use their platform's redirect rules to point requests to /bar/[dynamic-route] to a route-specific fallback /foo/[dynamic-route-fallback].html. This fallback would still do routing at runtime, but since it knows what route it's serving it'd have the chunks (and maybe even prerendered layouts) ready from the get-go.

I think a lot of this can already be accomplished by prerendering a page from the dynamic route with entries: ['*', '/bar/[fallback]'] and serving all requests with that page, since the client will fix everything up during hydration.

It's however not ideal as you can't prerender the fallback without prerendering all the other pages encountered in that route. I also haven't checked whether the client discards the whole page or reuses parts of the prerendered page when it does the navigation during hydration.

Since this is pretty niche, I think it'd be reasonable to just disregard prerender = false and unconditionally render pages explicitly listed in entries, unless this would cause other issues. Other improvements could be considered post-1.0 in my opinion.

[Badlapje]

This is a real problem for me. If i use adapter-static with a fallback, nothing works at all. I just get:

404 Not Found

    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: en/options
    RequestId: METTQFKHG22MSS81
    HostId: pZ9/y9jpxjxt32gaf37BQwDrj7hjwie/f6k8RErK18Q5KqrPtvNrydrgtt0vLv+b4EZnldRr298=

An Error Occurred While Attempting to Retrieve a Custom Error Document

    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: index.html

as near as i can tell this is because my routes use internationalization:
/[lang]/options or /[lang]

If i'm correct, is there currently any way i can get it to work. I don't care about SEO for this app, but i do need to get that SPA to work (it's hosted on a serverless environment - AWS - for reasons i cannot comprehend).

My config:

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: [
    preprocess({
      postcss: true,

      scss: {
        prependData: '@use "src/variables.scss" as *;',
      },
    }),
  ],

  kit: {
    adapter: adapter({
      fallback: '200.html',
      // precompress: true,
      // prerender: {
      //   entries: [
      //     '/en',
      //     '/en/options',
      //     '/nl',
      //     '/nl/options',
      //     '/fr',
      //     '/fr/options',
      //     '/de',
      //     '/de/options',
      //   ],
      // },
    }),

    vite: {
      mode: process.env.VITE_MODE || undefined,
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: '@use "src/variables.scss" as *;',
          },
        },
      },
    },
  },

  onwarn(warning, defaultHandler) {
    // don't warn for unused CSS as this get's confused by sass & Svelte does not compile unused css anywho
    if (warning.code === 'css-unused-selector') return

    // handle all other warnings normally
    defaultHandler(warning)
  },
}

export default config

[Rich-Harris]

@Badlapje the fallback page needs to be something that your hosting provider understands. NoSuchKey means that S3 can't find a file corresponding to the request URL. You probably need to configure a custom error document corresponding to whatever you specify as the fallback page

[Badlapje]

It turns out that this is what worked:
svelte.config.js:

  kit: {
    adapter: adapter({
      fallback: '404.html',
      precompress: true,
    }),
    prerender: {
      entries: [
        '/',
        '/en',
        '/en/options',
        '/nl',
        '/nl/options',
        '/fr',
        '/fr/options',
        '/de',
        '/de/options',
      ],
    },

    vite: {
      mode: process.env.VITE_MODE || undefined,
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: '@use "src/variables.scss" as *;',
          },
        },
      },
    },
  },

hooks.ts

  const response = await resolve(event, {
    ssr: false,
  })

Specifically the ssr: false options in the hooks file is what made it work. Without that bit i kept getting the NoSuchKey message. Thx @Rich-Harris for the input 👍 I already had it working with the above, but given your input I reckon that if I have a 404.html on S3, that would likely solve the problem without disabling ssr.

The above solution isn't really scalable for large apps, but for my current app (should see around 60k unique visitors / day) it's sufficient.

[brgrz]

Not only dynamic routes are not possible at all atm the default (new) setup of a SvelteKit app with static adapter fails when doing npm run build with the following error:

 @sveltejs/adapter-static: all routes must be fully prerenderable (unless using the 'fallback' option — see https://github.com/sveltejs/kit/tree/master/packages/adapter-static#spa-mode). Try adding `export const prerender = true` to your root layout.js — see https://kit.svelte.dev/docs/page-options#prerender for more details
Error: Encountered dynamic routes

I have no dynamic routes set up, there is only the default page.svelte file.

Also why does it mention layout.js, what file would that be? seems to me this hasn't been updated since the latest routing changes

I went and added both prerender and ssr options to the page (not both at the same time) but the issue remains

<script lang="ts">
	export const prerender = true;
	// export const ssr = false;
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

this is my svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			fallback: null,
			precompress: false
		  })
	}
};

export default config;