Fetching Component Properties Server-Side in Sitecore XM Cloud
Learn how to use getComponentServerProps in Sitecore XM Cloud to fetch component data server-side with GraphQL. See a real example of a Related Blogs component that queries the top related posts by category before rendering.
One of the advantages of working with Sitecore XM Cloud is the ability to fetch data server-side before rendering a component. This allows you to enrich components with contextual information—without requiring client-side calls.
In this example, I created a Related Blogs component that fetches the top three related blogs by category. On each Blog Post page, we assign a Category field that points to a category item. When the component renders, it queries the related blogs that share the same category.
For those of you interested, blow is a diagram I curated to accurately describe the flow of the lifecycle between the initial Browser request to getting the server side props and rendering the component.
Setting up Categories and Blog Pages
In Sitecore, I created a simple taxonomy:
- Categories: Category 1, Category 2, Category 3
- Blog Posts: A through F
Each Blog Post references a Category. For example:
- Blog Post A, B, and C → Category 1
- Blog Post D and E → Category 2
- Blog Post F → Category 3
Example:
- Blog Page A references Category 1
- Category 1 contains a title field with Category 1
The GraphQL Client
To support this, I added a method in the GraphQL client (client.ts) to fetch related blogs.
This uses a relatedBlogsQuery.graphql file to return the related posts.
The Related Blogs Component
In the RelatedBlogs.tsx component, I set up a server-side props function (getComponentServerProps) that fetches the related blogs before rendering.
The Default component then maps over these related blogs and displays them in a card layout:
The Result
On Blog Page A, which is assigned Category 1, the component displays the other top related blogs (Blog Page B and Blog Page C).
Summary
- By fetching component properties server-side, we can:
- Tailor components to the current context (Blog Page + Category).
- Avoid client-side calls for related content.
- Keep code clean and reusable by isolating GraphQL in a client class.
This pattern is especially powerful in XM Cloud, where GraphQL and server-side props work together to deliver flexible, content-driven components. As always, the code example for this blog post can be found here on my public repo!
Made in React Bricks