{"id":31772054,"url":"https://github.com/exortek/vike-multi-render","last_synced_at":"2025-10-10T03:55:28.152Z","repository":{"id":315074579,"uuid":"1057558974","full_name":"ExorTek/vike-multi-render","owner":"ExorTek","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-16T14:38:46.000Z","size":70,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-04T22:49:18.874Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ExorTek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-15T22:36:58.000Z","updated_at":"2025-09-16T14:38:49.000Z","dependencies_parsed_at":"2025-09-17T17:02:39.580Z","dependency_job_id":null,"html_url":"https://github.com/ExorTek/vike-multi-render","commit_stats":null,"previous_names":["exortek/vike-multi-render"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ExorTek/vike-multi-render","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExorTek%2Fvike-multi-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExorTek%2Fvike-multi-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExorTek%2Fvike-multi-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExorTek%2Fvike-multi-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ExorTek","download_url":"https://codeload.github.com/ExorTek/vike-multi-render/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExorTek%2Fvike-multi-render/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002601,"owners_count":26083426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-10T03:55:20.486Z","updated_at":"2025-10-10T03:55:28.147Z","avatar_url":"https://github.com/ExorTek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vike Multi Render\n\nA small example app demonstrating multiple render modes (SSR, SPA/CSR, SSG, and HTML-only) using Vike with React and a custom Fastify server. It showcases:\n\n- Per-page render modes via +renderMode.js\n- Server-side rendering streams and head management\n- A custom Fastify server for dev and prod\n- Vite + SWC React plugin and Tailwind CSS v4\n\nSee also: RENDER-MODES.md for a deeper dive into the render modes used in this repo.\n\n## Tech stack\n\n- Language: JavaScript (ESM)\n- Frameworks/Libraries:\n  - React 19\n  - Vike and vike-react\n  - Fastify 5 (custom server)\n  - react-streaming (SSR streaming)\n  - Tailwind CSS v4\n  - Vite 7 with @vitejs/plugin-react-swc\n- Package manager: Yarn 4 (Berry) — packageManager set to yarn@4.9.4\n\n## Requirements\n\n- Node.js 18+ recommended (required by modern Vite and many dependencies) — TODO: confirm minimum Node version for your environment\n- Yarn 4 (or use Corepack: `corepack enable`)\n\n## Getting started\n\n1. Install dependencies\n\n- If using Corepack (recommended):\n  - Enable once: `corepack enable`\n  - Then install: `yarn install`\n- Otherwise ensure you have Yarn 4 and run: `yarn install`\n\n2. Start in development\n\nThere are two dev flows — pick one:\n\n- Vike dev server only (no Fastify wrappers):\n  - `yarn dev:vike`\n  - Starts Vike’s dev server with HMR on 127.0.0.1.\n\n- Custom Fastify server in dev (Vite middleware embedded):\n  - `yarn dev:server`\n  - Boots Fastify at 127.0.0.1:3000 by default and mounts Vike dev middleware with HMR.\n\n3. Build for production\n\n- `yarn build`\n- Produces client and server bundles under `dist/` using Vike/Vite.\n\n4. Preview the built app\n\n- Option A: Vike’s preview server: `yarn preview`\n- Option B: Run the Fastify server in production mode: `yarn start`\n  - Equivalent to `NODE_ENV=production node server.js`\n\n## Available scripts\n\n- `yarn dev:vike` — Run Vike’s dev server (`vike dev --host 127.0.0.1`).\n- `yarn dev:server` — Run the custom Fastify server in development with Vite dev middleware.\n- `yarn build` — Build the app with Vike/Vite.\n- `yarn preview` — Preview the production build using Vike’s preview server.\n- `yarn start` — Start the custom Fastify server in production.\n- `yarn format` — Format source using Prettier.\n- `yarn test` — Run Vitest unit tests.\n- `yarn deploy` — Build and start the app using PM2.\n\n## Environment variables\n\nThese are read by the server or renderer. All are optional unless noted.\n\n- PORT — Port for the Fastify server. Default: 3000. Used in server.js.\n- HMR_PORT — Port for Vite HMR websocket when running the custom dev server. Default: 24678. Used in server.js.\n- NODE_ENV — Standard Node environment flag. Used to toggle dev/prod paths in server.js and reactStrictMode in pages/+config.js.\n- PUBLIC_ENV\\_\\_APP_ID — Used by the renderer to select the root element id for mounting/hydration (default `root`). This is read via `import.meta.env` in the client/renderer code. TODO: Document how/where this env var is injected in your deployment setup.\n\n## Project structure\n\nHigh-level overview of important files and folders:\n\n- server.js — Custom Fastify server integrating Vike (dev middleware in development and static serving in production)\n- vite.config.js — Vite config with Vike, React SWC plugin, Tailwind, and path aliases (e.g. @components, @pages)\n- pages/ — Vike file-based routing and per-page configs\n  - pages/+config.js — App-level Vike config extending vike-react (Layout, onRender hooks, prerender settings)\n  - pages/index/+Page.jsx — Home page\n  - pages/index/+config.js — Page-level config (prerender true)\n  - pages/index/+renderMode.js — Sets render mode (e.g., 'SSR')\n  - pages/client-side/+Page.jsx — Client-side example (CSR/SPA style)\n  - pages/client-side/+config.js — `prerender: false`\n  - pages/server-side/+Page.jsx — Server-side example (data used on server)\n  - pages/server-side/+config.js — `prerender: false`\n  - pages/server-side/+data.js — Data loader used by the server-rendered page\n  - pages/html/+Page.jsx — HTML-only example with no client hydration code\n  - pages/html/+config.js — `prerender: true`\n  - pages/html/+renderMode.js — Sets 'SSG' for static generation\n- renderer/ — App rendering hooks used by Vike\n  - renderer/index.js — Exports onRenderHtml and onRenderClient\n  - renderer/onRenderHtml.jsx — Builds HTML, handles head elements, SSR streaming options\n  - renderer/onRenderClient.jsx — Client React mount/hydration logic\n- hooks/\n  - hooks/usePageContext.jsx — React context bridge for `pageContext`\n  - hooks/index.js — Barrel export\n- layouts/\n  - layouts/MainLayout.jsx — Minimal layout importing global styles\n  - layouts/index.js — Barrel export\n- styles/global.css — Tailwind CSS v4 import\n- RENDER-MODES.md — Detailed explanation of render modes and configuration\n- public/ — Static assets (served at the root). TODO: Populate/confirm contents if needed.\n\nNote on path aliases: see vite.config.js for aliases like `@components`, `@helpers`, etc.\n\n## Render modes overview\n\nThis repo demonstrates multiple render strategies per page using Vike’s config and +renderMode.js files:\n\n- SSR (Server-Side Rendering): initial HTML on server, then hydrate on client.\n- SPA/CSR (Client-Side Rendering): render entirely on the client.\n- SSG (Static Site Generation): pre-rendered at build time.\n- HTML-only: static HTML without shipping client JS for that page.\n\nSee RENDER-MODES.md for concrete examples and when to use each mode.\n\n## Styling\n\nTailwind CSS v4 is wired in via `@tailwindcss/vite` and imported once in `layouts/MainLayout.jsx` through `styles/global.css`.\n\n## Testing\n\nThis repo uses Vitest for unit tests.\n\n- Build app: `yarn build`\n- Start app: `yarn start`\n- Run all tests: `yarn test`\n\n## Deployment (PM2)\n\n- `yarn build`\n- `pm2 start ecosystem.config.cjs`\n\nEnsure `NODE_ENV=production` and set `PORT` as needed. If using custom proxies/CDN, verify HMR only applies in development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexortek%2Fvike-multi-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexortek%2Fvike-multi-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexortek%2Fvike-multi-render/lists"}