https://github.com/sejori/fastify-preact-ssr

Fastify server-side renders Preact to html and serves with a Preact client.js bundle for DOM hydration.
https://github.com/sejori/fastify-preact-ssr

fastify preact rollup ssr

Last synced: about 2 months ago
JSON representation

Fastify server-side renders Preact to html and serves with a Preact client.js bundle for DOM hydration.

• Host: GitHub
• URL: https://github.com/sejori/fastify-preact-ssr
• Owner: sejori
• Created: 2021-03-03T11:42:38.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-08-21T08:55:53.000Z (over 1 year ago)
• Last Synced: 2024-10-06T08:32:55.307Z (3 months ago)
• Topics: fastify, preact, rollup, ssr
• Language: JavaScript
• Homepage:
• Size: 2.18 MB
• Stars: 49
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fastify Preact SSR.

![lighthouse-score](https://raw.githubusercontent.com/sebringrose/how-to-build/main/public/lighthouse-score.png)

### Overview:

The **Fastify** app bundle ```src/server.js -> rollup -> build/server.js``` uses ```src/preact/pages/index.js``` to render the html for each page on the server side using **preact-render-to-string** and serve via the correct url path. 

The **Preact** bundle (```src/client.js -> rollup -> public/client.js```) is referrenced in the html and once loaded will Hydrate the DOM with all the juicy **Preact** goodness with **preact-router**  ```src/preact/components/Router.js``` to hydrate the correct content for the page. 

### Commands:

- ```$ npm run dev``` - rollup src/client.js into public/client.js and src/server.js into build/server.js with sourcemaps and file-watching & run build/server.js with nodemon. App available at localhost:8888.

- ```$ npm build``` - rollup src/client.js into public/client.js and src/server.js into build/server.js.

- ```$ npm start``` - run build/server.js

### Get started:

To build on this codebase check out ```src/client.js``` and ```src/server.js``` then have a go at editing:

 - ```src/preact/components```

 - ```src/preact/pages```

 - ```src/preact/layouts```

Make sure you update ```src/preact/pages/index.js``` if you add new pages.

**WARNING: This has not been tested in production. Use at your own risk.**

Codebase inspired by [Kyle Macquarrie](https://kylemacquarrie.co.uk/blog/preact-ssr-tutorial).