blumenjs 0.2.3 → 0.2.4

package/dist/templates/app/shared/RouterContext.tsx

@@ -212,6 +212,14 @@ export function RouterProvider({
 		return () => window.removeEventListener("popstate", onPopState);
 	}, []);
 
+	// Track whether hydration is complete. During hydration, we skip
+	// Suspense because the lazy chunk hasn't loaded yet and Suspense
+	// would show a fallback that mismatches the server HTML.
+	const [hydrated, setHydrated] = useState(false);
+	useEffect(() => {
+		setHydrated(true);
+	}, []);
+
 	// ── Render ──────────────────────────────────────────────────
 	const contextValue: RouterContextValue = { path, params, navigate };
 
@@ -220,6 +228,19 @@ export function RouterProvider({
 	// 2. Otherwise — show the page component
 	const LoadingComp = loadingComponent;
 
+	// During initial hydration, render App directly (no Suspense/ErrorBoundary)
+	// to match the SSR output exactly. After hydration, wrap with Suspense
+	// for lazy-loaded navigation.
+	const pageContent = hydrated ? (
+		<BlumenErrorBoundary>
+			<Suspense fallback={LoadingComp ? <LoadingComp /> : <DefaultLoading />}>
+				<App Component={PageComponent} pageProps={pageProps} />
+			</Suspense>
+		</BlumenErrorBoundary>
+	) : (
+		<App Component={PageComponent} pageProps={pageProps} />
+	);
+
 	return (
 		<RouterContext.Provider value={contextValue}>
 			{isLoading && LoadingComp ? (
@@ -230,11 +251,7 @@ export function RouterProvider({
 				<div
 					className={`page-transition ${transitioning ? "page-transition-exit" : "page-transition-active"}`}
 				>
-					<BlumenErrorBoundary>
-						<Suspense fallback={LoadingComp ? <LoadingComp /> : <DefaultLoading />}>
-							<App Component={PageComponent} pageProps={pageProps} />
-						</Suspense>
-					</BlumenErrorBoundary>
+					{pageContent}
 				</div>
 			)}
 		</RouterContext.Provider>

package/dist/templates/node-ssr/server.ts

@@ -342,8 +342,9 @@ async function handleRender(
 		};
 
 		// Render React to HTML
-		// Wrap in the same page-transition div that the client-side
-		// RouterProvider renders, so hydration trees match exactly.
+		// Must match the client's INITIAL hydration tree exactly:
+		//   div.page-transition > App
+		// (Client adds Suspense/ErrorBoundary AFTER hydration via useEffect)
 		const appElement = React.createElement(
 			"div",
 			{ className: "page-transition page-transition-active" },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blumenjs",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "The React framework powered by Go. Lightning-fast SSR with the DX you deserve.",
 	"type": "module",
 	"bin": {