Switching from React to Preact (Server-side Rendering with JavaScript Frameworks)

Serve Dynamic Content with Cloud Functions: goo.gl/kCEuPd
Preact: preactjs.com
Preact is a really small React alternative coming in around 3kb. Reducing the size of the library can give us some performance benefits since we don't have to load as much JavaScript to take over our server-side rendered app. We'll also cancel out any redundant HTTP requests for JSON data to give the app a bigger performance boost.
Watch more Server-side Rendering with Javascript Frameworks: goo.gl/yaYkHX
Subscribe to the Firebase Channel to never miss a Server-side Rendering episode: goo.gl/9giPHG

[@harishbalamurugan]

I think the reason behind the facts getting duplicated is because we are importing bundle.js (client side preact) into index.html. Removing that can also ensure that only the server-side rendered preact is loaded. Pardon my english and terminology. A truly great tutorial this is.

[@alexanderjones5288]

But seriously where can I get one of those firebase shirts... They aren't anywhere online

[@dijital_ink]

@Firebase I have a question. Would this be obsolete now? It seems in 2021 the Preact CLI now automatically enables Server Side Rendering. Or does this still have some optimizations that would make it still useful to apply? Thanks.

[@frostyghostman6430]

just putting it out there, but using the serialize-javascript library instead of JSON.stringify would help in preventing XSS attacks. Just using JSON .stringify in this or similar instances, could potentially leave you vulnerable....

[@letsl2]

We are already rendering the App component with facts inside it on the server, why do we still need to stringify facts again and make it available into the script tag on the client 🤔 ? Great tutorial though.

[@uidotdev]

What a beautiful man.

[@akXIII]

6.1kb bundle... and then you actually have to add firebase to your project

[@alexanderjones5288]

Where can I buy one of those firebase shirts lol

[@TheGrafox]

Thanks

[@MehmetKoseDev]

server side rendering with cloud functions, wow dude, for real?

[@ashishjangid5201]

How to avoid that network request in angular??

[@alexanderjones5288]

easy just switch to preact

[@ashishjangid5201]

Alexander Jones sounds great..thanks😝

[@sawilliams]

Nerds always make thing 500 times more complicated than they need to be.

[@rb.x]

Replacing an HTML comment? This appears really convoluted.

[@lutfucan90]

Ember? they are scared of vue for sure

[@UrakkaCholvom]

What an ugly workaround!! Why would you duplicate data twice on the client side? Preact sucks