Preact-cli: clidemo: Complete SSR

[leandrobrunner]

Only the root path is rendered in the server.

Example: https://clidemo.preactjs.com/profile/john with javascript disabled shows the home component instead of the profile component.

[thangngoc89]

@leandrobrunner SSR isn't supported (or planing to) in preact-cli. We only prerender the index route

[developit]

I'm open to pre-rendering static routes, since we already parse them out. Also there's a PR #88 that exports the Webpack Compiler instance so you could mount that into an Express server and do true SSR if you wanted.

For the demo though, it's static files. Since the URL is a form of input, we can't prerender an unlimited domain of URLs.

[rkostrzewski]

I would totally like to expose compiler with full example on how to set up SSR, possibly with inlining critical css and loading the rest later.

[reznord]

Regarding inlining critical-css we have webpack-plugin-critical. It installs phantom-prebuilt while installing. If that is not an issue, we can use this.

Ideally the code for inlining critical-css should go here.

[thangngoc89]

@reznord phantom? That thing is so old and can't keep up with mordern browser. Today we have chrome headless

[reznord]

Yeah !! Then it is better to go with Addy Osmani's critical package

[rkostrzewski]

Which uses phantom under the hood :)

I think for the examples there's no need for that stuff as we've got css modules which we can select

[reznord]

I'd love to go with styled-components.

It has pretty good SSR support and very easy in identifying critical-css !!

Everything explained about latest version (v2) here.

[lukeed]

Or emotion 😉

Paging Dr @tkh44

[rkostrzewski]

Yeah, css in js makes it a piece of cake 💯

[reznord]

Browser Support no ie11 support (from emotion readme)

Emotion doesn't have support for IE11? o.O

[reznord]

And we have this - https://github.com/tkh44/emotion#usage-with-css-modules

[tkh44]

@reznord emotion supports ie11 just fine in inline mode.

[tkh44]

I've been meaning to add native preact support for you guys 😅

Gimme 10 min

Edit: https://github.com/tkh44/emotion/pull/85

[thangngoc89]

@tkh44 You have to keep preact/react component in sync once you do that :sob:

[tkh44]

Yeah but it's < 30 lines

[lukeed]

Here's a demo repo for a complete SSR solution using Preact CLI's output & an Express server.

There's now also preact-cli-plugin-critical-css, in addition to some others, as a solution for critical CSS extraction per route.