fix(whitelabeling): resolve FOUC by migrating branding injection to SSR#4753
Open
imrja8 wants to merge 1 commit into
Open
fix(whitelabeling): resolve FOUC by migrating branding injection to SSR#4753imrja8 wants to merge 1 commit into
imrja8 wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is this PR about?
For Enterprise users utilizing the custom branding features, the current implementation breaks the illusion of a fully whitelabeled platform. When clients or employees visit the public-facing pages, they are briefly shown the default Dokploy logo, Dokploy tab title, and Dokploy colors before the page abruptly "flashes" to their custom branding. This visual glitch makes the platform feel unpolished and unstable to end-users.
This PR fixes that completely. It migrates the branding logic entirely to Server-Side Rendering (SSR) to ensure the DOM is perfectly branded on the very first byte delivered to the browser.
How & Why
1.
_document.tsxSSR Shell Injection<title>,<link rel="icon">, and custom CSS out of_app.tsxand into_document.tsx.data:URI, preventing the browser from needing to make a secondary network request on initial paint.2. tRPC SSR Prefetching
createServerSideHelperstogetServerSidePropson all unauthenticated routes (index.tsx,register.tsx,invitation.tsx,send-reset-password.tsx) as well asgetInitialPropsin_error.tsx.whitelabeling.getPublic, the React QuerytrpcStateis dehydrated into the page. When the client-sideuseWhitelabelingPublichook mounts, it hits a warm cache synchronously. Result: Zero Dokploy logo flashing on mount.Intentional Optimizations & Architecture Decisions
globalThiscaching layer in_document.tsx:__SETTINGS_CACHE: 1-minute TTL for whitelabeling JSON config.__FAVICON_CACHE: 1-hour TTL for the base64 favicon buffer.clearBrandingSSRCache()in thewhitelabeling.tsbackend router so that theglobalThiscaches are instantly wiped the millisecond an admin saves or resets their settings in the dashboard.whitelabeling-provider.tsxand removed the client-side<title>override from_app.tsx, successfully preventing React hydration mismatches.og:imageormeta:descriptiontags, as those fields do not currently exist in thewebServerSettingsdatabase schema. All changes strictly respect the existing codebase boundaries.Checklist
Before submitting this PR, please make sure that:
canarybranch.Issues related (if applicable)
closes #4750
Screenshots
Screenshots can't prove changes, since FOUC is a temporal loading flash and not a static layout bug. Reviewers can verify the instantaneous, flicker-free rendering of the custom branding by testing the public routes locally.