——

Server-Side-Rendering (SSR)

Factor is a "universal" or server-side-rendered platform. This means that HTML is first generated by your server and then sent to the client where client-side javascript takes over.

VUE SSR

This doc will explain SSR in Factor but, if you'd like to understand more, the SSR engine is built on Vue's server-rendering system.

Handling Data

If you'd like to server-render something the data for it must first be "pre-fetched" on your server.

To do this you'll need to do two things:

  1. Fetch the data on your server
  2. Add the data to the store

As an example, we'll fetch a post:

import { addGlobalPrefetch, storeItem } from "@factor/tools"

addGlobalPrefetch(async route => {
  const data = await getData()
  storeItem("myItem", data)
})

// or in a component
// https://ssr.vuejs.org/api/#serverprefetch
export default {
  async serverPrefetch() {
    const data = await getData()
    storeItem("myItem", data)
  }
}

Getting Client-Side

Now all that is needed to get this information on the client-side is a computed property referencing the same item in the store as the one you added above:

// inside-my-component.vue
// using a store "getter" the information needed will be available
// both server-side and client-side
export default {
  computed: {
    myItem() {
      return stored("myItem") || {}
    }
  }
}

Lifecycle Hooks

In Vue components we have two primary 'hooks' that are initialized when components are created, mounted and created. With Factor SSR, it's important to know that the mounted hook is only fired on the users browser, while the created hook is fired on both.

export default {
  created() {}, // fired on both server and client
  mounted() {} // fired only on client
}

SSR and Users

When doing SSR, Factor always treats the user as logged out. This has some important performance benefits.

If you are planning on showing some content that requires information about the specific user, then use the userInitialized function. This function will return the user once they have initialized and you can adjust your UI accordingly.

import { userInitialized } from "@factor/user"
export default {
  async mounted() {
    const user = await userInitialized()
    // user auth state is loaded
  }
}