fastify / fastify/help

How to use fastify-vite with an existing route?

Open
#781 0 comments 0 reactions 0 assignees View on GitHub
help wanted
Dominant language
No language data
Stars
68
Forks
8
Avg merge
11h 2m
Merged PRs (30d)
2

Description

## 💬 How do you render SSR components from an existing Fastify route?

I'd like to simply render a Svelte/React/Vue page from an existing Fastify route and return the HTML to the client.

E.g.

```js
// Uses Vite magic to import the component from a .svelte file and provide a JS object that has a render() method
import HomePage from './HomePage.svelte'

fastify.get('/', async (req, reply) => {
// Do some complicated server-side stuff here...

// Render the home page
const { js, css, html } = await HomePage.render({ /* props */ })

// Inject the js/css/html for the home page into some sort of html template and return
return reply.html(css, js, html)
})
```

From what I can tell of @fastify/fastify-vite, routes are generated by the plugin which means you can't use an existing route alongside it. This seems like it should be straightforward and I'm just missing something.

I'd like to primarily focus on SSR but eventually ship some hydrated components + JS to the client for a richer client-side app, (but still MPA with SSR.)

Thanks!

## Your Environment

- *node version*: 18+
- *fastify version*: >=4.0.0
- *os*: Mac
- *Typescript*

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.