Prerender: Generate flat .html files for routes without a trailing slash

[tobigumo]

Moved from Q&A → Proposals
This was originally a Q&A thread, but I’ve re-categorized it as a Proposal so we can discuss adding first-class support instead of relying on a workaround.

Many static hosts don’t rewrite clean URLs like /about to /about/index.html, so pages generated by the current prerenderer are unreachable unless the URL ends with a trailing slash (e.g., /about/).
Below are two ways we could make prerendered output work out-of-the-box.

Option 1 (preferred, intuitive): infer from the route string

Let the presence / absence of a trailing slash in each route decide the output shape:

prerender:  ["/", "/about", "/blog/"]   // mixed example

Route string	Output file generated
/	build/client/index.html
/about	build/client/about.html
/blog/	build/client/blog/index.html

This requires no extra config and matches what developers already type.
The open question is whether changing the default like this could break existing projects; if that impact is too wide, see Option 2.

Option 2 (explicit flag): keep current default, add an opt-in

prerender: ["/", "/about", "/contact"],
trailingSlash: false,          // false: emit about.html instead of about/index.html

This avoids any breaking change but does add one more option to learn.

---

I’d be grateful if the maintainers could consider which approach fits best—thank you for taking the time to review this proposal!

Original Q&A Post

Click to expand

I’d be grateful if the maintainers could consider which approach fits best—thank you for taking the time to review this proposal!

I’m currently experimenting with pre-rendering.
When I specify paths like ["/", "/about", "/contact"], the files are generated as follows:

// prerender: ["/", "/about", "/contact"]

Prerender: Generated build/client/index.html
Prerender: Generated build/client/about/index.html
Prerender: Generated build/client/contact/index.html

However, when hosting these files, it’s often not possible to access the pages using URLs like:

https://example.com/about
https://example.com/contact

Instead, they are only accessible with trailing slashes:

https://example.com/about/
https://example.com/contact/

Would it be possible to configure the output files to remove trailing slashes so they can be accessed without them?
For example:

Prerender: Generated build/client/index.html
- Prerender: Generated build/client/about/index.html
+ Prerender: Generated build/client/about.html
- Prerender: Generated build/client/contact/index.html
+ Prerender: Generated build/client/contact.html

[haitaojarvis]

Basically, a trailingSlash option like https://svelte.dev/docs/kit/page-options#trailingSlash is needed to control both the routing address and the pre-rendered file structure.

[andycloke]

This is massively needed. At the moment it forces 301 redirects (e.g. from /about/ to /about). If you have a link from another page to /about, it's bad for SEO.

[andycloke]

We fixed by adding this as a postbuild script. Seems to work well

import fs from 'fs';
import path from 'path';

const clientDir = path.join(process.cwd(), 'build', 'client');

/**
 * This script finds all prerendered outputs like:
 *   build/client/pricing/index.html
 * and renames them to:
 *   build/client/pricing.html
 * then removes the old folder, so we don't get "/pricing/" trailing slash.
 */

function renamePrerenderedRoutes(dir: string) {
  const entries = fs.readdirSync(dir, { withFileTypes: true });

  for (const entry of entries) {
    if (entry.isDirectory()) {
      const folderName = entry.name;
      const folderPath = path.join(dir, folderName);
      const indexHtmlPath = path.join(folderPath, 'index.html');

      // If there's an "index.html", rename it to {folderName}.html
      if (fs.existsSync(indexHtmlPath)) {
        const newHtmlPath = path.join(dir, `${folderName}.html`);
        fs.renameSync(indexHtmlPath, newHtmlPath);

        // Optionally remove the old (now empty) folder
        fs.rmSync(folderPath, { recursive: true });
      } else {
        // Recursively process sub-directories
        renamePrerenderedRoutes(folderPath);
      }
    }
  }
}

renamePrerenderedRoutes(clientDir);

console.log('Successfully renamed pre-rendered route folders to single .html files.');

[tobigumo]

Thanks—this script was really helpful!

I’ve moved the thread to Proposals so we can discuss adding official support for this, rather than relying on a post-build workaround.

Appreciate the quick solution!