How scully decides when to render a member variable into HTML?

Question

I'm curious how Scully decides whether to render a template variable directly into HTML, or not. From what I tested, a simple string variable is rendered directly, but a complex object wasn't rendered (although it seemingly cached it).

Any guidance would be nice.

==

This is rendered into HTML nicely:

// component.ts

  message?: any;

  ngOnInit(): void {

    this.message = this.state.useScullyTransferState(
      'test-data',
      this.http.get("https://reqres.in/api/users/2").pipe(map(a => JSON.stringify(a)))
    )
  }
..

// component.html
{{message | async}}

This is not rendered:

// component.ts
  page?: PageObject;

  ngOnInit(): void {
    this.pageId = this.route.snapshot.paramMap.get('pageId') || '';

    this.page = new PageObject(this.pageId, 'pages', this.firestore)
    this.page.enableStaticRendering(this.transferStateService)
    this.page.load() // pageObject uses scullyTransferService internally.
  }

// component.html
{{page.description}}