SSR sequence diagram

sequence-diagram.md

---
config:
  theme: dark
  sequence:
    noteAlign: left
---
sequenceDiagram
  participant Headless as @coveo/headless
  participant SSR as Server-side
  participant CSR as Client-side
  alt Create shared definition
    note over Headless,CSR: const definition = defineSearchEngine({<br/>#20;#20;configuration,<br/>#20;#20;controllers: {<br/>#20;#20;#20;#20;searchBox: defineSearchBox(),<br/>#20;#20;#20;#20;facet: defineFacet({ field: 'some-field', ... }),<br/>#20;#20;#20;#20;...<br/>#20;#20;},<br/>})#59;
    SSR->>+Headless: Engine configuration
    SSR->>Headless: Map of controller configurations
    Headless->>-SSR: Engine definition
    CSR->>+Headless: Engine configuration
    CSR->>Headless: Map of controller configurations
    Headless->>-CSR: Engine definition
  end
  CSR->>+SSR: Request page
  alt Fetch static state
    note over Headless,SSR: const staticState = await definition.fetchStaticState()#59;
    SSR->>+Headless: Demand static state
    Headless->>Headless: Initialize engine
    Headless->>Headless: Initialize controllers
    Headless->>Headless: Execute search
    Headless->>-SSR: Static state (State of every controller, first search response)
  end
  alt Render
    note over SSR: Using the state of every controller
    SSR->>SSR: Generate HTML
  end
  SSR->>CSR: Static state
  SSR->>-CSR: HTML
  CSR->>CSR: Display HTML
  alt Hydrate
    note over Headless,CSR: const hydratedState = await definition.hydrateStaticState(staticState.searchResponse)#59;
    CSR->>+Headless: Demand hydrated state
    Headless->>Headless: Initialize engine
    Headless->>Headless: Initialize controllers
    Headless->>Headless: Simulate search using response
    Headless->>-CSR: Hydrated state (Engine and controllers)
  end
  CSR->>CSR: Add interactivity using engine and controllers

Loading