5 files changed, 10 insertions, 10 deletions
diff --git a/src/frontend/render/preact.ts b/src/frontend/render/preact.ts
index 359202372..8705c5504 100644
--- a/src/frontend/render/preact.ts
+++ b/src/frontend/render/preact.ts
@@ -7,7 +7,7 @@ Function.prototype(render);
 
 const Preact: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => renderToString(h(Component, props, ...children));
+    return async (props, ...children) => renderToString(h(Component, props, ...children));
   },
   imports: {
     preact: ['render', 'h'],
diff --git a/src/frontend/render/react.ts b/src/frontend/render/react.ts
index 8b127cf96..7143516f6 100644
--- a/src/frontend/render/react.ts
+++ b/src/frontend/render/react.ts
@@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
 
 const ReactRenderer: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
+    return async (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
   },
   imports: {
     react: ['default as React'],
diff --git a/src/frontend/render/renderer.ts b/src/frontend/render/renderer.ts
index 272f4ef5c..e0d1fccce 100644
--- a/src/frontend/render/renderer.ts
+++ b/src/frontend/render/renderer.ts
@@ -5,7 +5,7 @@ interface DynamicRenderContext {
 }
 
 export interface Renderer {
-  renderStatic(Component: any): (props: Record<string, any>, ...children: any[]) => string;
+  renderStatic(Component: any): (props: Record<string, any>, ...children: any[]) => Promise<string>;
   render(context: { root: string; Component: string; props: string; [key: string]: string }): string;
   imports?: Record<string, string[]>;
 }
@@ -36,10 +36,10 @@ export function createRenderer(renderer: Renderer) {
     wrapperEnd: string | ((context: ReturnType<typeof createContext>) => string)
   ) => (Component: any, renderContext: DynamicRenderContext) => {
     const innerContext = createContext();
-    return (props: Record<string, any>, ...children: any[]) => {
+    return async (props: Record<string, any>, ...children: any[]) => {
       let value: string;
       try {
-        value = _static(Component)(props, ...children);
+        value = await _static(Component)(props, ...children);
       } catch (e) {
         value = '';
       }
diff --git a/src/frontend/render/svelte.ts b/src/frontend/render/svelte.ts
index 15676e8c6..2f67eb79f 100644
--- a/src/frontend/render/svelte.ts
+++ b/src/frontend/render/svelte.ts
@@ -2,7 +2,7 @@ import { Renderer, createRenderer } from './renderer';
 
 const SvelteRenderer: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => {
+    return async (props, ...children) => {
       const { html } = Component.render(props);
       return html;
     };
diff --git a/src/frontend/render/vue.ts b/src/frontend/render/vue.ts
index bcf6b70bd..3ffa4ed0d 100644
--- a/src/frontend/render/vue.ts
+++ b/src/frontend/render/vue.ts
@@ -4,7 +4,7 @@ import { Renderer, createRenderer } from './renderer';
 
 const Vue: Renderer = {
   renderStatic(Component) {
-    return (props, ...children) => {
+    return async (props, ...children) => {
       const app = createSSRApp({
         components: {
           Component,
@@ -13,8 +13,8 @@ const Vue: Renderer = {
           return createElement(Component as any, props);
         },
       });
-      // Uh oh, Vue's `renderToString` is async... Does that mean everything needs to be?
-      return renderToString(app) as any;
+      const html = await renderToString(app);
+      return html;
     };
   },
   imports: {
@@ -22,7 +22,7 @@ const Vue: Renderer = {
   },
   render({ Component, root, props }) {
     return `const App = { render() { return createElement(${Component}, ${props} )} };
-createApp(App).mount(${root})`;
+createApp(App).mount(${root});`;
   },
 };