Device detect SSR support

[fuxingloh]

Motivation

Currently SSR is done using props; ssr="{columns: 2}". Statically defining the columns for SSR is useful for SEO purpose but it is only useful for SEO. Once the view get hydrated at the client side, it is practically useless and waste of CPU cycle on server side.

Solution

The user-agent gives hint of the browser type and therefore the device type. The device type can be used to interpolate the dimension of the screen and therefore providing a custom server side render to each unique user-agent.

There is a community plugin nuxt-community/device-module which can be used as a dependency for this project.

Proposed Implementation

<vue-masonry-wall :options="{width: 300, ssr: {mobile: 2, tablet: 4, desktop: 5}}" :items="items">
  <template v-slot:default="{item}">
    ...
  </template>
</vue-masonry-wall>