diff --git a/frontend/src/pages/renderer/+config.h.js b/frontend/src/pages/renderer/+config.h.js
new file mode 100644
index 000000000..aee9344b5
--- /dev/null
+++ b/frontend/src/pages/renderer/+config.h.js
@@ -0,0 +1,4 @@
+export default {
+ // https://vike.dev/passToClient
+ passToClient: ['pageProps'],
+};
diff --git a/frontend/src/pages/renderer/+onRenderClient.jsx b/frontend/src/pages/renderer/+onRenderClient.jsx
new file mode 100644
index 000000000..08b4e5f77
--- /dev/null
+++ b/frontend/src/pages/renderer/+onRenderClient.jsx
@@ -0,0 +1,26 @@
+export default onRenderClient;
+
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import {
+ initializeMixpanel,
+ initializeChannelService,
+ initializeSentry,
+ initializeKakaoSDK,
+} from '@/utils/initSDK.ts';
+
+initializeMixpanel();
+initializeChannelService();
+initializeSentry();
+initializeKakaoSDK();
+
+async function onRenderClient(pageContext) {
+ const { Page } = pageContext;
+ hydrateRoot(
+ document.getElementById('root'),
+
+
+ ,
+ );
+}
diff --git a/frontend/src/pages/renderer/+onRenderHtml.jsx b/frontend/src/pages/renderer/+onRenderHtml.jsx
new file mode 100644
index 000000000..19a479425
--- /dev/null
+++ b/frontend/src/pages/renderer/+onRenderHtml.jsx
@@ -0,0 +1,22 @@
+export default onRenderHtml;
+
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { StaticRouter } from 'react-router';
+import { escapeInject, dangerouslySkipEscape } from 'vike/server';
+
+async function onRenderHtml(pageContext) {
+ const { Page, pageProps, urlPathname } = pageContext;
+
+ const pageHtml = renderToString(
+
+
+ ,
+ );
+ return escapeInject`
+
+
+ ${dangerouslySkipEscape(pageHtml)}
+
+ `;
+}
diff --git a/frontend/src/pages/server/index.ts b/frontend/src/pages/server/index.ts
new file mode 100644
index 000000000..f34bf9bab
--- /dev/null
+++ b/frontend/src/pages/server/index.ts
@@ -0,0 +1,12 @@
+import { Hono } from 'hono';
+import { apply } from 'vike-server/hono';
+import { serve } from 'vike-server/hono/serve';
+
+export default startServer();
+
+function startServer() {
+ const app = new Hono();
+ apply(app);
+ const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
+ return serve(app, { port });
+}
diff --git a/frontend/src/utils/initSDK.ts b/frontend/src/utils/initSDK.ts
index cf0cc81a4..f9908db8a 100644
--- a/frontend/src/utils/initSDK.ts
+++ b/frontend/src/utils/initSDK.ts
@@ -3,8 +3,8 @@ import * as ChannelService from '@channel.io/channel-web-sdk-loader';
import * as Sentry from '@sentry/react';
export function initializeMixpanel() {
- if (process.env.REACT_APP_MIXPANEL_TOKEN) {
- mixpanel.init(process.env.REACT_APP_MIXPANEL_TOKEN, {
+ if (import.meta.env.VITE_MIXPANEL_TOKEN) {
+ mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, {
ip: false,
debug: false,
});
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 000000000..0df49b5a3
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import vike from 'vike/plugin';
+import { fileURLToPath } from 'node:url';
+import { URL } from 'node:url';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(async () => {
+ return {
+ build: {},
+ plugins: [react(), vike()],
+ ssr: { noExternal: ['styled-components'] },
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ },
+ dedupe: ['styled-components'],
+ },
+ };
+});