https://github.com/gwjun/fastify-vite-ssr
Vite SSR application template with Fastify web framework
https://github.com/gwjun/fastify-vite-ssr
fastify ssr vite
Last synced: about 2 months ago
JSON representation
Vite SSR application template with Fastify web framework
- Host: GitHub
- URL: https://github.com/gwjun/fastify-vite-ssr
- Owner: GWjun
- Created: 2024-12-04T01:19:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-29T12:46:57.000Z (over 1 year ago)
- Last Synced: 2025-02-01T14:17:24.762Z (over 1 year ago)
- Topics: fastify, ssr, vite
- Language: TypeScript
- Homepage:
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite SSR Boilerplate with Fastify
This repository provides a boilerplate for building server-side rendered (SSR) applications using **Vite** and **Fastify**.
It also supports server and client routing using **React Router**.
## Installation
Clone the repository and install the dependencies:
```bash
pnpm install
```
## Run
- **Development:**
```bash
pnpm dev
```
Starts the development server using vite-node.
- **Production Build:**
```bash
pnpm build
```
Generates the client and server builds for production.
- **Start Production Server:**
```bash
pnpm start
```
Builds the application and starts the server in production mode.
## Route
By declaring route objects in `src/routes.tsx`, routing is handled on both the server and client using `StaticRouterProvider` and `RouterProvider`, respectively.
## Data Fetching
Using React Router’s `loader`, data can be fetched on the server and delivered to the client.
```tsx
const routes: RouteObject[] = [
{
path: '/',
element: ,
loader: async () => {
// server side code
return fetch(`https://jsonplaceholder.typicode.com/todos`)
},
},
]
```
```tsx
export default function Home() {
// get ssr data
const data: TodoType[] = useLoaderData()
// ...
}
```
## Structure
```
├── dist/ # Production build output
├── src/ # React application source files
│ ├── main.tsx # Client-side entry point
│ └── route.tsx # Route object
└── server/ # Fastify server code
├── entry.tsx # Server-side entry point for SSR render
├── main.ts # Main server file
└── util.ts # Utility function file
```
## Reference
- https://vite.dev/guide/ssr
- https://reactrouter.com/start/framework/custom