Static Assets Differences with PWA Kit

PWA Kit uses a traditional Webpack-based approach with SVG sprites and utility functions for responsive images. Storefront Next leverages Vite’s native asset handling with a modern component-based approach for responsive images and tree-shaken icon imports. The shift simplifies asset management while providing more powerful responsive image capabilities through the DynamicImage component.

AspectPWA KitStorefront Next
Build ToolWebpackVite
Static Directoryapp/static/public/
Asset URLsgetAssetUrl() helperDirect / paths
Icon SystemSVG sprite sheetTree-shaken React icons
Image ComponentCustom with SSR preload<picture> with React 19 preload
Responsive ImagesUtility functionsDynamicImage component
Font StrategyChakra UI defaultsTailwind CSS defaults
CSP HeadersExplicit in ssr.jsFramework-handled

PWA Kit:

Storefront Next:

PWA Kit:

Storefront Next:

PWA Kit:

Storefront Next:

  1. Lazy loading default: Both default to loading="lazy".
  2. B2C Commerce images: Both use Dynamic Imaging Service (?sw={width}).
  3. System fonts: Neither bundles custom web fonts.
  4. SSR awareness: Both handle preloading for above-fold images.
  5. Aspect ratio handling: Both manage layout stability.

  • Asset Path Changes

    • Replace getAssetUrl() with direct / paths.
    • Move files from app/static/ to public/.

  • SVG Icons

    • Replace sprite imports with lucide-react icons.
    • Or create individual SVG component imports.

  • Image Component

    • Replace custom Image with DynamicImage.
    • Update width props to new format.

  • Responsive Images

    • Convert utility function usage to DynamicImage props.
    • Breakpoint format changes from array to object.