Server side routes should support dynamic route naming (with prerendering)

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

src/
  artist/
    [name].js/

Should support any route like /artist/${name}/ without needing to know all the URLs up front.

Details

With this, I think we would also then be able to implement something akin to Next.js' getStaticPaths API, which could allow users to export a bunch of static content from this dynamic route definition.

export default ArtistDetailsPage extends HTMLElement {
  constructor(request) {
    super();
 
    this.request = request;
  }

  async connectedCallback() {
    const { request } = this;
    const artist = await fetch(request).then(resp => resp.json());
    const { name, bio } = artist;

    this.innerHTML = `
      <h2>${name}</h2>
      <p>${bio}</p>
    `;
  }
}

export const getStaticPaths = (async () => {
  const endpoint = 'http://www.myapi.com';
  const data =  await fetch('${endpoint}/artists').then(resp => resp.json());

  return data.map((artist) => {
    const { id, name } = artist;

    return {
      request: new Request(new URL(`${endpoint}/artists?artistId?=${id}`,
      name: `/artists/${name}/`
    }
}

With this data, Greenwood can invoke the page for as many static versions of the page the user wants using:

• request as the "constructor prop" to pass into the page component
• name as the output filename, based on filesystem based routing, e.g. pages/artist/[name].js

Effectively this would / could be an alternative and / or complete deprecation of the sources plugin.