nacelle

https://getnacelle.com/

nacelle is a really neat platform for building scalable ecommerce applications. their static api concept (and the entire development workflow) is honestly a brilliant example of a jamstack application. many of the ideas beind nacelle are rooted in the same principles that make networks like bit torrent and NDN scale. in fact, a p2p variant of this design would not require large conceptual changes, you would simply replace some of the underlying systems.

meta

target audience and pricing

https://getnacelle.com/pricing

nacelle is direcetly geared towards established ecommerce businesses who need a better way to scale their storefront and their pricing reflects that. to be fair, the infrastructure requirements for this type of web application can be quite high. nacelle is fairly competitive with the cost of rolling your own massively scalable ecommerce system, especially when you factor in the cost of engineers who can build that kind of system.

technology

vue

nuxt

contentful integration

shopify integration

development

data loading

the default data loading mixins expect statically defined collection names OR handles passed in via `vue-router`. for more dynamic uses, like client-side JOINs between contentful and shopify, refactor `~/mixins/getCollection` into a utility function that dispatches the same logic using `fetch` based on some dynamic data.

import getPage from '~/mixins/getPage'
export default {
  template: `
    <div
      v-if="page"
      class="c-page"
    >
      <!-- display page data somehow -->
    </div>
  `,
  mixins: [
    // adds Object page to the vm, loaded via asyncData
    getPage({ pageHandle: 'my-page-handle' })
  ]
}

https://docs.getnacelle.com/nuxt/fetching-data.html

filtering & searching

interesting to see that `~/components/nacelle/RefinementFilters.vue` uses a `Worker` to execute the filter process on another thread. a very sensible approach considering the intentionally limited capabilities of the static API.

additional filtering components should be registered under `~/components/nacelle/RefinementFilterSelect.vue` where they are loaded into `RefinementFilter` and then into the appropirate place in the site's component tree. `RefinementFilters` loops over the filters and their values to display the select component, this component, in turn, decides what markup to show for that type of filter. the default template uses `v-for...v-else`, but if you have a lot of filtering components, this would not be very manageable.

export default {
  template: `
    <div class="c-facet-value">
      <div v-if="filterComponent === null">
        <!-- default / fallback / simple filter option -->
      </div>
      <component v-else :is="filterComponent" v-bind="filterComponentProps" />
    </div>
  `,
  props: ['value', 'property', 'activeFilters'],
  components: {
    /* all of the filter components */
  },
  computed: {
    filterComponentProps () {
      return {/* the props go here */}
    },
    filterComponent () {
      const value = this.value
      const property = this.property
      const activeFilters = this.activeFilters
      let result = null
      // check the above values and set result to the appropriate
      // component name. for example, if property === 'color'
      // then you'd set result = 'RefinementFilterColorSwatch'
      return result
    }
  }
}

of course, we have yet to address the issue of controlling the filter state! the nuxt starter binds `@click` in `RefinementFilters` to toggle the filter properties. it may be adviseable to approach this differently and allow the filter components to emit appropriate objects rather than handling everything statically.

https://docs.getnacelle.com/nuxt/filtering-products.html

customer accounts

https://docs.getnacelle.com/integrations/shopify-accounts.html

nuxt data loading

for performance reasons, it is important to support server side rendering whenever data is loaded. to this end, there are two ways to hook data loading functions into nuxt.

`asyncData` when the handle is known at compile time

`fetch` when the handle is known only at runtime

deployment

universal ssr

nacelle deployment netlify

i would argue that there is a benefit to server side rendering with nacelle, even though their documentation does not rec this approach. at some scale, maybe SSR is too expensive to do even with caching involved. i would expect nacelle to take advantage of nuxt's SSR features, i wonder what the reasoning is.

see also

jamstack