Preact-cli: SERVE SSR BUILD

[Shivam2498]

Need some more instructions on how to use ssr build for server side rendering

[prateekbh]

// @developit @ForsakenHarmony how about just add a page about this on the documentation site?

[lukeed]

Here are example repos demonstrating exactly this:

• https://github.com/lukeed/preact-cli-ssr
• https://github.com/johnhaitas/preact-cli-express-ssr

[Shivam2498]

Is it not goof to add some more clarity in documentation @lukeed ?

[prateekbh]

No I don't think there is a problem in adding a documentation. We would love a page about it

[lukeed]

Docs always help!

Not sure if you're asking _me_ for docs about what's happening there, but just in case:

1) We make use of the url prop from preact-router, since it allows us to _pass in_ a specific URL to match: https://github.com/lukeed/preact-cli-ssr/blob/master/src/components/app.js#L23
2) We build the project, as normal: preact build
3) We create a new server.js file which loads the _built_ SSR bundle from step 1: https://github.com/lukeed/preact-cli-ssr/blob/master/server.js#L8-L10
4) We require & keep a skeleton HTML file in memory, which has the correct asset paths (etc) for SSR usage: https://github.com/lukeed/preact-cli-ssr/blob/master/server.js#L15
5) On every request (for this example) we use preact-render-to-string to render our App, while ensuring to pass in the url prop. This tells App what we're requesting AND so we're given the output for that page: https://github.com/lukeed/preact-cli-ssr/blob/master/server.js#L26
6) We take that SSR output and inject it into the HTML template we loaded (from step 4) and send it as the response: https://github.com/lukeed/preact-cli-ssr/blob/master/server.js#L28

---

Hope that helps! 😄

[Shivam2498]

Thank you @lukeed for the help!