🐛 Fix: resolve hydration mismatch in RelatedProjects links by oksaumya · Pull Request #1190 · kubestellar/docs

oksaumya · 2026-02-22T19:41:52Z

📌 Fixes

📝 Summary of Changes

Resolved a hydration mismatch issue in the RelatedProjects component where SSR and client rendered different href attributes.

Problem

Server rendered:
href="https://kubestellar.io/docs"

Client rendered:
href="/docs"

This triggered a React hydration warning.

Solution

• Normalized projectUrl generation
• Ensured consistent link rendering across SSR and client
• Removed non-deterministic URL logic

Result

No hydration warnings
Stable React hydration
Consistent markup

Affected File

src/components/docs/RelatedProjects.tsx

Changes Made

Updated ...
Refactored ...
Fixed ...
Added tests for ...

Checklist

Please ensure the following before submitting your PR:

I have reviewed the project's contribution guidelines.
I have written unit tests for the changes (if applicable).
I have updated the documentation (if applicable).
I have tested the changes locally and ensured they work as expected.

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Add any special notes for the reviewer here

Signed-off-by: saumya <saumyakr2006@gmail.com>

kubestellar-prow · 2026-02-22T19:41:57Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign btwshivam for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

netlify · 2026-02-22T19:41:58Z

✅ Deploy Preview for kubestellar-docs ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`c1feb2c`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellar-docs/deploys/699b5c035f2d2600085e173c
😎 Deploy Preview	https://deploy-preview-1190--kubestellar-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-02-22T19:42:01Z

Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request.

Before your PR can be merged, please ensure:

✅ DCO Sign-off - All commits must be signed off with git commit -s to certify the Developer Certificate of Origin

✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), ⚠️ (breaking change)

Getting Started with KubeStellar:

📦 Quick Start
📖 Documentation
🎬 YouTube - Getting Started & Contributing

Contributor Resources:

🌟 Help KubeStellar Grow - We Need Adopters!

Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes:

📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction!

A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack!

Copilot

Pull request overview

Fixes a React hydration mismatch in the docs sidebar’s RelatedProjects component by making the initial SSR and client render produce consistent href attributes for project links.

Changes:

Introduced isProduction as state with a post-mount hostname check (instead of computing it during render).
Adjusted URL generation flow to avoid SSR/client divergence for link hrefs.
Added suppressHydrationWarning to related project <a> links.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/docs/RelatedProjects.tsx

Copilot · 2026-02-22T19:46:05Z

src/components/docs/RelatedProjects.tsx

+    const checkProduction = 
+      window.location.hostname === 'kubestellar.io' || 
+      window.location.hostname === 'www.kubestellar.io' ||
+      window.location.hostname === 'localhost';


The hostname check treats localhost as “production” but does not include other common local hosts like 127.0.0.1 (or ::1). If the site is accessed via those, checkProduction becomes false and links get rewritten to the production domain after mount, which is unexpected for local development. Consider expanding the local-host allowlist (the repo already checks for 127.0.0.1 elsewhere, e.g. src/lib/url.ts).

Suggested change

const checkProduction =

window.location.hostname === 'kubestellar.io' ||

window.location.hostname === 'www.kubestellar.io' ||

window.location.hostname === 'localhost';

const checkProduction =

window.location.hostname === 'kubestellar.io' ||

window.location.hostname === 'www.kubestellar.io' ||

window.location.hostname === 'localhost' ||

window.location.hostname === '127.0.0.1' ||

window.location.hostname === '::1';

Copilot · 2026-02-22T19:46:05Z

src/components/docs/RelatedProjects.tsx

            <a
              key={project.title}
              href={projectUrl}
+              suppressHydrationWarning


suppressHydrationWarning on the <a> tag will silence any future SSR/client attribute mismatches for this link (not just the original href issue), which can hide real bugs. If the goal is “consistent link rendering across SSR and client”, it’s better to make projectUrl deterministic for the initial render and drop this suppression once the underlying mismatch is resolved.

Suggested change

suppressHydrationWarning

oksaumya · 2026-02-23T10:19:56Z

/ok-to-test

clubanderson

Review

Good fix. Moving the isProduction hostname check from render-time typeof window into React state initialized via useEffect is the correct Next.js/React pattern and eliminates the SSR/client hydration mismatch.

One suggestion: The suppressHydrationWarning on the <a> tags is now redundant since the state-based approach eliminates the mismatch. Consider removing it — leaving it in masks any future hydration issues on those elements.

Merge order note: This PR and #1195 both modify RelatedProjects.tsx. This one should merge first as it's the more foundational fix. #1195 will need a rebase after.

/lgtm

kubestellar-prow · 2026-02-24T03:35:53Z

LGTM label has been added.

Details

Git tree hash: 75b88a64e253dcef4eeed2b0c8f11b17adef3ad3

…matting - Add isProduction as useState(true) + useEffect (from #1190) to avoid render-time window check - Remove render-time typeof window !== 'undefined' isProduction check - Restore Moon/Sun className to original 3-line format (revert unrelated reformatting) - Add suppressHydrationWarning to <a> tag (from #1190) - Keep hover fix: hoveredProject state, onMouseEnter/onMouseLeave, bgColor logic Co-authored-by: clubanderson <407614+clubanderson@users.noreply.github.com>

🐛 Fix: resolve hydration mismatch in RelatedProjects links

c1feb2c

Signed-off-by: saumya <saumyakr2006@gmail.com>

Copilot AI review requested due to automatic review settings February 22, 2026 19:41

kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Feb 22, 2026

kubestellar-prow bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Feb 22, 2026

github-actions bot added frontend typescript and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Feb 22, 2026

Copilot started reviewing on behalf of oksaumya February 22, 2026 19:42 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

kubestellar-prow bot added the ok-to-test Indicates a non-member PR verified by an org member that is safe to test. label Feb 23, 2026

clubanderson approved these changes Feb 24, 2026

View reviewed changes

kubestellar-prow bot assigned clubanderson Feb 24, 2026

kubestellar-prow bot added the lgtm Indicates that a PR is ready to be merged. label Feb 24, 2026

clubanderson mentioned this pull request Feb 24, 2026

🐛 Fix: related projects hover appears dark in light mode #1195

Open

8 tasks

clubanderson merged commit e5f6f07 into kubestellar:main Feb 24, 2026
24 of 25 checks passed

Copilot AI mentioned this pull request Feb 24, 2026

🐛 Fix: related projects hover appears dark in light mode #1202

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

🐛 Fix: resolve hydration mismatch in RelatedProjects links#1190

🐛 Fix: resolve hydration mismatch in RelatedProjects links#1190
clubanderson merged 1 commit intokubestellar:mainfrom
oksaumya:ssr

oksaumya commented Feb 22, 2026

Uh oh!

kubestellar-prow bot commented Feb 22, 2026

Uh oh!

netlify bot commented Feb 22, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

oksaumya commented Feb 23, 2026

Uh oh!

clubanderson left a comment

Uh oh!

kubestellar-prow bot commented Feb 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

oksaumya commented Feb 22, 2026

📌 Fixes

📝 Summary of Changes

Problem

Solution

Result

Affected File

Changes Made

Checklist

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Uh oh!

kubestellar-prow bot commented Feb 22, 2026

Uh oh!

netlify bot commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellar-docs ready!

Uh oh!

github-actions bot commented Feb 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

oksaumya commented Feb 23, 2026

Uh oh!

clubanderson left a comment

Choose a reason for hiding this comment

Review

Uh oh!

kubestellar-prow bot commented Feb 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Feb 22, 2026 •

edited

Loading