@startuml actor User participant Browser participant Vercel participant article.page.server.ts participant Solid participant Store User -> Browser: discours.io activate Browser Browser -> Vercel: GET activate Vercel Vercel -> article.page.server.ts: render activate article.page.server.ts article.page.server.ts -> apiClient: getArticle({ slug }) activate apiClient apiClient -> DB: query: articleBySlug activate DB DB --> apiClient: response deactivate DB apiClient --> article.page.server.ts: article data deactivate apiClient article.page.server.ts -> Solid: render activate Solid Solid -> Store: useCurrentArticleStore(article) activate Store Store -> Store: create store with initial data (server) Store --> Solid: currentArticle deactivate Store Solid -> Solid: render component Solid --> article.page.server.ts: rendered component deactivate Solid article.page.server.ts --> Vercel: rendered page Vercel -> Vercel: save rendered page to CDN deactivate article.page.server.ts Vercel --> Browser: rendered page deactivate Vercel Browser --> User: rendered page deactivate Browser Browser -> Browser: load client scripts Browser -> Solid: render Solid -> Store: useCurrentArticleStore(article) activate Store Store -> Store: create store with initial data (client) Store --> Solid: currentArticle deactivate Store Solid -> Solid: render component (no changes) Solid -> Solid: onMount Solid -> Store: loadArticleComments activate Store Store -> apiClient: getArticleComments activate apiClient apiClient -> DB: query: getReactions activate DB DB --> apiClient: response deactivate DB apiClient --> Store: comments data deactivate apiClient Store -> Store: update store Store --> Solid: store updated deactivate Store Solid -> Solid: render comments Solid --> Browser: rendered comments Browser --> User: comments @enduml