diff --git a/src/ui/layout/hero-code-snippet.tsx b/src/ui/layout/hero-code-snippet.tsx
index ff841a653..0983f0fb2 100644
--- a/src/ui/layout/hero-code-snippet.tsx
+++ b/src/ui/layout/hero-code-snippet.tsx
@@ -1,5 +1,6 @@
+
+import { cache, createAsync } from "@solidjs/router";
 import { codeToHtml } from "shiki";
-import { createResource } from "solid-js";
 
 export const counterTxt = `import { createSignal } from "solid-js";
 
@@ -17,16 +18,17 @@ function Counter() {
 
 export const snippetLines = counterTxt.split("\n");
 
-const renderCode = async () => {
+const renderCode = cache(async () => {
+	"use server";
 	const code = counterTxt.trim();
 	return codeToHtml(code, {
 		lang: "tsx",
 		theme: "material-theme-ocean",
 	});
-};
+}, "render-code");
 
 export default function CodeSnippet() {
-	const [code] = createResource(renderCode);
+	const code = createAsync(() => renderCode());
 
 	// eslint-disable-next-line solid/no-innerhtml
 	return <div innerHTML={code()} />;
diff --git a/src/ui/layout/hero.tsx b/src/ui/layout/hero.tsx
index a988fab43..99c0a899e 100644
--- a/src/ui/layout/hero.tsx
+++ b/src/ui/layout/hero.tsx
@@ -7,13 +7,10 @@ import {
 	createMemo,
 } from "solid-js";
 import { ButtonLink } from "../button-link";
-import { clientOnly } from "@solidjs/start";
-import { counterTxt, snippetLines } from "./hero-code-snippet";
+import CodeSnippet, { counterTxt, snippetLines } from "./hero-code-snippet";
 import { useLocation, useMatch } from "@solidjs/router";
 import { useI18n } from "~/i18n/i18n-context";
 
-const RenderedCode = clientOnly(() => import("./hero-code-snippet"));
-
 const TrafficLightsIcon: Component<{ class: string }> = (props) => {
 	return (
 		<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
@@ -109,16 +106,15 @@ export const Hero: Component = () => {
 											</Index>
 										</div>
 										<div
-											class={`flex overflow-x-auto px-4 min-h-[${
-												snippetLines.length + 5
-											}em] text-white custom-scrollbar`}
+											class={`flex overflow-x-auto px-4 min-h-[${snippetLines.length + 5
+												}em] text-white custom-scrollbar`}
 										>
 											<Suspense
 												fallback={
 													<pre class="text-slate-300">{counterTxt}</pre>
 												}
 											>
-												<RenderedCode />
+												<CodeSnippet />
 											</Suspense>
 										</div>
 									</div>