diff --git a/src/index.tsx b/src/index.tsx
index 13e26d5..da5f62c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -16,6 +16,8 @@ export * from './utils'
 export { frontend } from './frontend'
 export type { Context } from 'hono'
 
+const pageCache = new Map()
+
 export type HypeProps = {
   pico?: boolean
   reset?: boolean
@@ -146,12 +148,22 @@ export class Hype<
       if (!(await Bun.file(path).exists()))
         return render404(c)
 
-      const layoutPath = join(process.env.PWD ?? '.', `./src/pages/_layout.tsx`)
       let Layout = defaultLayout
-      if (await Bun.file(layoutPath).exists())
-        Layout = (await import(layoutPath + `?t=${Date.now()}`)).default
+      const layoutPath = join(process.env.PWD ?? '.', `./src/pages/_layout.tsx`)
+      if (await Bun.file(layoutPath).exists()) {
+        let Layout = pageCache.get(layoutPath)
+        if (!Layout) {
+          Layout = (await import(layoutPath + `?t=${Date.now()}`)).default
+          pageCache.set(layoutPath, Layout)
+        }
+      }
+
+      let page = pageCache.get(path)
+      if (!page) {
+        page = await import(path + `?t=${Date.now()}`)
+        pageCache.set(path, page)
+      }
 
-      const page = await import(path + `?t=${Date.now()}`)
       const innerHTML = typeof page.default === 'function' ? <page.default c={c} req={c.req} /> : page.default
       const withLayout = this.props.layout !== false ? <Layout props={this.props}>{innerHTML}</Layout> : innerHTML
       return c.html(withLayout)
@@ -164,9 +176,7 @@ export class Hype<
     const isDev = process.env.NODE_ENV !== 'production'
     let port = process.env.PORT ? Number(process.env.PORT) : 3000
 
-    if (isDev) {
-      port = findAvailablePortSync(port)
-    }
+    if (isDev) port = findAvailablePort(port)
 
     return {
       port,
@@ -176,10 +186,8 @@ export class Hype<
   }
 }
 
-/**
- * Synchronously find an available port starting from the given port
- */
-function findAvailablePortSync(startPort: number, maxAttempts = 100): number {
+// find an available port starting from the given port
+function findAvailablePort(startPort: number, maxAttempts = 100): number {
   for (let port = startPort; port < startPort + maxAttempts; port++) {
     try {
       const server = Bun.serve({ port, fetch: () => new Response() })
diff --git a/src/utils.tsx b/src/utils.tsx
index 03bdcbe..7a08ca3 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,5 +1,4 @@
 import { type Context } from 'hono'
-import { stat } from 'fs/promises'
 
 // template literal tag for inline CSS. returns a <style> tag
 export function css(strings: TemplateStringsArray, ...values: any[]) {
@@ -143,11 +142,8 @@ const transpileCache: Record<string, string> = {}
 
 // transpile frontend ts to js
 export async function transpile(path: string): Promise<string> {
-  const { mtime } = await stat(path)
-  const key = `${path}?${mtime}`
-
-  // no caching in dev mode
-  let cached = process.env.NODE_ENV === 'production' ? transpileCache[key] : undefined
+  // cache by path; --watch restarts server on file changes, clearing the cache
+  let cached = transpileCache[path]
 
   if (!cached) {
     const result = await Bun.build({
@@ -160,7 +156,7 @@ export async function transpile(path: string): Promise<string> {
     if (!result.outputs[0]) throw new Error(`Failed to build ${path}`)
 
     cached = await result.outputs[0].text()
-    transpileCache[key] = cached
+    transpileCache[path] = cached
   }
 
   return cached