Screen size detection at SSR

[tobi-or-not-tobi]

The screen layout of the Storefront is driven by configurable breakpoints. The breakpoints have a configurable screen size (i.e. < 576px), and associated screen name can be used to further define the layout. A good example is the page template slot configuration, which can be adjusted per screen name, so that the layout differs per screen size (i.e. mobile vs desktop). Other features can however also use the screen names to further enhance rendering of the feature. A good example is the table component, which has a configurable list of headers, based on the screen.

The creation of screen specific DOM is what we call adaptive design. This design is optimised for small screens, but is also optimised for accessibility.

The problem with this technique is that it is driven by the window width. The breakpoint configuration is compared to the actual window width and will change whenever the actual window is changing.

On SSR, we however do not have a window. We cannot find the screen by comparing the window size. This is why we currently use a mobile-first approach on SSR. This is causing issues however, as:

• the generated layout might not reflect the actual window size
• the generated content might not be enough for the crawler

To fix this, we need to take a few pieces into account:

• we can introduce device detection into the mix. We'd do this in SSR only, and need to map the detected device type to the screens we define in the breakpoint configuration
• as soon as we render multiple versions in SSR, based on device type, we should take this into account in any cache layer on top of SSR (mainly web server cache and CDN). We could do this by exposing the device type as a header.

It is not yet clear what level of granularity we'd need to expose for the device. The following comes to mind:

• mobile
• table
• desktop
• bot/crawler

Going forward this list could be extended (i.e. television, game console) or further subtypes could be added (i.e. Pinterest vs Instagram).