Programmatic site generation

[gilesbutler]

Hey @ElMassimo,

Thanks for your work and such an awesome project! I saw Astro a while ago and thought it was great but wanted it in Vue land so this is incredible that you've made it happen.

I'm not sure if the title is right but I thought I'd ask anyway.

In our project we build sites by loading some JSON which has all the content and meta data for the pages, and crucially it enables/disables the pages visibility. An example structure...

{
  "sites": {
    "12345": {
      "name": "My Site",
      "url": "http://www.example.com",
      "icon": "http://www.example.com/favicon.ico",
      "description": "lipsum",
      "pages": {
        "index": {
          "hidden": false,
          "content": {
            "title": "Homepage"
          }
        },
        "about": {
          "hidden": true,
          "content": {
            "title": "About Us"
          }
        }
      }
    }
  }
}

We have a few issues I was hoping you might be able to help with please :)

1. We don't want to make multiple calls to the DB each time a page is rendered so fetching the json at a page level doesn't seem like the best place to do it. Where do you recommend we make the call so we can pass the json down to each page before it gets rendered?

• From my understanding Iles will render the entire app for every page so even if we add the call to the DB in enhanceApp it will still be called multiple times?

2. How do we prevent pages being rendered based on the hidden field in the json?

• I saw we could remove pages after the build but my concern is this doesn't scale very well. It will cost us lots of extra compute time rendering and removing pages that didn't need to be rendered.

Hope that makes sense.

Thanks again,
Giles

[ElMassimo]

Hi Giles! I'll provide a quick answer now, if you share a repo with an example I can be more specific.

Where do you recommend we make the call so we can pass the json down to each page before it gets rendered?

Although enhanceApp will be called every time the Vue app is created (standard practice when doing SSR is to create a fresh app for each render), you can leverage ES modules to ensure you fetch the data outside the hook, ensuring it runs only once.

A great place to do that is src/site.ts:

const data = await fetchSiteJSON()

export default {
  title: data.name, // Used by default to render meta tags and page titles
  ...data,
}

This data would be available as $site in templates, or site when using enhanceApp or usePage, making it globally available.

---

To avoid fetching many times during dev, I'd recommend caching in local storage in an SSR friendly way:

const siteJSON = await withCache('siteJSON', fetchSiteJSON)

This would ensure that if you are fetching from a remote API service, you only need to wait for the request the first time, and the example utility I linked provides a refresh method that you could expose in the UI as needed to re-fetch the data.

---

If you want specific pages to access this data in an idiomatic way, you could instead fetch it in iles.config.ts, and inject it using extendFrontmatter. You could then easily inject the title to the frontmatter:

  extendFrontmatter (frontmatter, filename) {
    const dataForPage = extractFromSiteJSON(filename) // a function you can define or import in `iles.config.ts`
    Object.assign(frontmatter, dataForPage)
  },

This will be run only in Node.js (not the browser), so you can use a simpler in-memory caching strategy during development.

---

How do we prevent pages being rendered based on the hidden field in the json?

If you plan to define pages programmatically, a good place to "drive" the site is to use extendRoutes to define which pages are added/removed.

  extendRoutes (routes) {
    return routes.filter(shouldRouteBeRendered) // a function you can define or import in `iles.config.ts`
  },

The hook receives the routes inferred from src/pages, making it the ideal place to add or remove routes.

Since that hook will only be called once during build, it would only require a single API call based on what you mentioned.

[gilesbutler]

Hey @ElMassimo,

Thank you for getting back to me and for the detailed response!! It's been super helpful so far and pretty much got us where we need to be!

I'll update the thread if anything else crops up. Looking forward to seeing how the project progresses.

Thanks again,
Giles