3 weeks ago


I think I've found my #SPA #SSG #SSR holy grail:

- #Preact with no build step (#ESM only)
- HTM for JSX-like syntax
- preact-render-to-string for server-side rendering
- preact-router for all routing
- Preact's `hydrate` method

On the server (I use #koa, but works with #Fastify or #Express, too) routes can either serve

- Pre-rendered static markup
- Pre-rendered app routes that get hydrated on the client (optionally switching to client-side rendering)
- Fully client-side rendered apps

In the beginning #websites were static files.

Then websites were generated dynamically on a server with a language like #PHP or #Ruby.

But when we wanted to do complex #frontend behaviors we would need to generate #html in the same way as those #backend languages, which was awkward.

So, we used #reactJS #fullstack to render "Single Page Apps" (#SPA) in the browser and on the server using "Server-Side Rendering" (#SSR).

#webDev #javaScript

RSI Info
1 month ago

"La #SSR dovrebbe essere sottoposta al Controllo finanze"

Un'iniziativa in tal senso di Marco Romano (Centro) avrebbe trovato ampio consenso alle Camere federali

Doug Parker 🕸️
1 month ago
1 month ago

– The debate client-side vs server side is almost as old as the web itself. There was a decade where almost everything was rendered on the server because clients didn't have the power to render all that stuff. Then there was the decade where almost everything was rendered on the client because that was "cooler". Now, everyone wants to do #SSR. Truth is, it isn't either or. Both have their pros and cons.

The Spicy Web
1 month ago

Hey folks.

We like sharing links here.

But many of the links we've started sharing now include additional context courtesy of our sibling project, @jaredwhite's That HTML Blog.

So y'all might like to check that out and add the RSS Feed / Newsletter Digest to your reader(s) of choice.

And if YOU have something to share, email links(at) with all the deets!

#WebDev #HTML #CSS #JavaScript #WebComponents #SSG #SSR

Ideal CH
1 month ago

@buercher Ça m'avait interloqué, mais comme ni le journaliste ni le directeur de la #SSR ne réagissent… Ils ont peut-être peur de se tromper en corrigeant l'UDC?

Elle a dû confondre avec le #conseilSuisseDeLaPresse.

Neff :manjaro:
1 month ago

@ildisinformatico Paolone convinci i colleghi in #RSI a migrare tutti i canali su mastodon... La #BBC lo ha già fatto... Penso che la #SSR potrebbe fare altrettanto!

Henk Prins
1 month ago

Lees alles over: 'Is het maken van procesafspraken bij strafzaken een goede manier om het proces te versnellen, of' | 'SSR Meestervertellers podcast over procesafspraken' op | #meestervertellers #ssr #podcast #procesafspraken

Doug Parker 🕸️
2 months ago

#Angular v16.2 just dropped this week with lots of cool new features.

On the tooling side we've got:
✅ Performance improvements for our experimental #esbuild + #vite stack.
✅ A new, experimental "application builder" which supports #CSR, #SSR, and #SSG all in one with an improved devserver and faster build times.
✅ Automatic injection of preload hints for #JS and #CSS used in the initial load.

There's even more beyond tooling and lots more cool stuff coming. Very excited about what's in the pipeline for v17!

More complete changelogs 👇

Doug Parker 🕸️
2 months ago

We just released a fix for a bug that could potentially cause an #XSS vulnerability in the #Critters library that #Angular uses for CSS inlining.

If you're using #SSR with Angular v16.1+, please update Angular #Universal and Critters.

For more details:

Andrew Leahey
3 months ago

A perhaps off-base #weirdcarmastodon take I hold is that the early-00s #Chevrolet #SSR 1) looks cool and 2) will some day be sought after.

3 months ago

[Re. @TeamTWTPOffi]
Bollywood challenged and failed
Kollywood challenged and failed
Sandalwood challenged and failed

And they're still struggling to meet the standards set by #Baahubali
Deadliest combo...
#Prabhas - #SSR

Lots of exciting developments happening @! They are moving their #IPFS storage from #AWS/#DigitalOcean to #Filecoin/#ARWeave! So apps hosted on #Fleek are truly #decentalized!

#fleek #web3 #webHosting #faas #NFT #NFA #CDN #serverless #SSR #crypto #webDev #webDevelopment

Charles Chen @
4 months ago

If you’re a weekend hacker or seeking to stand up a no-cost, low-maintenance, low-ops solution that requires an #SSR component, then #Nuxt with #Firebase is a great #serverless solution as the fantastic CLI tooling and emulator for Firebase combined with the ease of deployment and operations — while still offering tons of room to grow should a project take off— makes it the best choice for moving fast.

Andrew Woods
5 months ago

you know, it’s funny. For all the web pages that get created in PHP, a language with native templatng, we haven’t really created good strategies for making it easy to work with markup.

Where’s the discussion of strategies of creating blocks of HTML/XML? of wrapping heredocs / nowdocs in typehinted functions? of making that markup accessible?

#PHP #SSR #HTML #WebDesign #WebDev

Samir Saeedi :firedoge:
5 months ago

*screaming internally* #NextJS #SSR

Next.JS error:
Warning: Text content did not match. Server: "0 seconds ago" Client: "1 second ago"

This is biggy: AWS Lambda response streaming

You can now replace Fargate in this architecture
#aws #lambda #ssr #serverless

Thomas Broyer
6 months ago

What is a single-page application (SPA) exactly? How does it relate to client-side rendering (CSR)? (spoiler: SPA doesn't necessarily imply CSR.)

#SPA #MPA #CSR #SSR #ProgressiveEnhancement

Schema of SSR, ESR, SWSR and CSR, with grouping representing SSR-in-the-broader-sense (SSR and ESR) vs. BSR (SWSR and CSR), and which generate HTML (SSR, ESR and SWSR) or manipulate the DOM (CSR)
Thomas Broyer
6 months ago

I don't know how to call "assembling parts of HTML into a full page" at edge or service-worker; it's not really "rendering" to me, so not ESR/SWSR.

From the above, this mean you can have:
• SPA+SSR: Turbolinks
• SPA+CSR: most React/Vue/Angular apps
• SPA+SSR+CSR: NextJS et al.
• MPA+SSR: most "web sites"
• MPA+SSR+PE (progressive enhancement)
• MPA+CSR: silly but I've seen it (HTML page is empty, possibly with data as JSON to be rendered client-side)

#SPA #MPA #CSR #SSR #ProgressiveEnhancement

Thomas Broyer
6 months ago

Can we please agree on some terms?

• SPA: load one HTML then do everything in the same page (== client-side navigation), that page can be a static empty shell, be SSR'd for the given URL
• MPA: load different HTML pages when navigating
→ a given "app" can use a mix of SPA and MPA

• CSR: apply some "templating" to "data" on the client (RSC's "vdom as JSON" rendering is CSR)
• SSR/ESR: the same, on the server (origin or edge), so HTML goes over the wire to the browser


Grant 👾
6 months ago

Today I was having some hydration errors and also noticed the performance of my application was in the 80's so I put my thinking 🧢 on and managed to resolve the issues. 😁

Look at these core web vitals for MOBILE!

#corewebvitals #seo #debugging #react #ssr #astro #javascript #softwaredevelopment

Leute! Der
@holgergp hat ganz intensiv in seine JVM Filterblase gehorcht und uns ein neues Thema mitgebracht:

Server-side-rendering mit HTMX. Sind wir begeistert? Oder haben die 90er bei uns angerufen?

Seht selbst:
#ssr #java #springboot #htmx

Doug Parker 🕸️
7 months ago

I just started playing around with #Preact #SSR with #htm and the first thing I did was render the classic:

<!DOCTYPE html>
<meta charset="utf8">
<h2>Hello, World!</h2>

And this intuitively output:

<meta charset="utf8" >
<h2>Hello, World!</h2>

* `<!DOCTYPE html>` is gone.
* `<html>` turned into `html` and lost its close tag.
* `<body>` got moved inside `<head>`.


Apparently you can't output a doctype at all ( and the `<meta>` tag is not self-closing in #JSX.

I'm willing to accept those constraints, but this is an utter failure of DX IMHO. If my template is wrong, TELL ME! Don't just generate what's effectively garbage for seemingly no reason. There's no obviously logical path from "bad output" to "the mistake in my code". Error messages, please!

7 months ago

If #HTML forms supported PUT and DELETE verbs I'm pretty sure I'd never use JS again. All the talk about client side vs #SSR means nothing while HTML is intentionally crippled by browser devs so you can waste your time recreating basic functionality in JS.

Stephen Belovarich
7 months ago
7 months ago

This solution just works with normal #WordPress hosting such as @nginx or #Apache.
@nodejs is supported as optional with server side rendering (#SSR).

You can think of this as a special theme for #WordPress. Behind the scene, we use headless WordPress approach and REST API

8 months ago

Das #ZDF, immer in wenig hinterher.

ZDF will Alternative zu Twitter und Co. entwickeln lassen

Könnten ja mal fragen, wie sowas geht.

#ForschungsprojektfüroffenenDialogimNetz #PublicSpacesIncubator #CBC #SRG #SSR #RTBF #New_Public

Jeffrey Yasskin
8 months ago

@kulykov The magic of #WebComponents is that you can embed a web component written with one framework into a main page or another web component written in a different component. #Lit #SSR requires the whole page be written in just Lit, right? That means it's not SSR'ing web components, just SSR'ing a single framework.

Still magic, but not really web components.

Tom Sherman :unverified:
8 months ago

Are you using client only components in #Remix? You should be using a Suspense boundary to manage this instead of any isHydrated check hacks you might have in place right now

By the way this also applies to other #SSR #React 18 apps, not just remix

Post here!

@brianleroux my opinion is that #react was popular in the era of single page applications as it was a view library.

For SSR today we are in the age of meta frameworks. They are built from the ground up for SSR, hence they can handle the paradigm alot better.
Although #nextjs has taken the #SSR mantel for react, the direction they are going in is not in spirit of react.

I would rather prefer a newer framework or library now.

Doug Parker 🕸️
8 months ago

@tbroyer There's definitely a trade-off, and you're right about those limitations.

Although I argue this approach has the issues of an #SPA _router_ specifically, which is a much smaller subset of issues than SPA's typically experience. For example this router supports:

* Full #SSR.
* No forced client-side hydration.
* No duplicated server/client build process.
* No blocking #JS.
* No required web framework.
* `<noscript />` compatible.
* No required #Node server.
* #HTML streaming (with some caveats).

There's a lot of features here which SPA's have historically done very poorly. This is why I put this router in a slightly different camp than those architectures.

8 months ago

After having checked #nextjs 13 with app/ directory I found that it indeed works perfectly neat...

BUT: It doesn't play well with libraries yet. So if you plan to use a specific library of your choice I recommend you stay with the well-working `pages/` directory structure.

Here is a sample issue:

#react #nextjs #frontend #backend #ssr

8 months ago

Sneak Peak: After having discussed a few things in the Mantine Repo I've seen that the main maintainer has heard our needs and switched to `rem` sizing for components which is frickin' awesome

#sneakpeak #react #nextjs #mantine #frontend #ssr

🕹️ jbz
8 months ago

「 Attempting to use a string templating system to generate a language with formally defined syntax is fundamentally hazardous as a string template language doesn't know how to represent a template variable in the target language, and, due to the frequent need for escaping, a naive representation may be wrong 」

#html #ssr #webdev

Rodion Borisov
8 months ago


You are right, it's a short URL for the same thing. So I tried a long-form URL and it still doesn't verify.

Now that I look into source code of the page (pure HTML), it definitely has NO profile description. That's a shame. I though #PeerTube had considered doing #SSR or #SSG of content strategically important for #SearchEngineOptimization, but my expectation once again met the cold ground.

#SearchFail #SEO #static #web

Doug Parker 🕸️
8 months ago

#Idea: I think I've suggested this before, but it would be cool to have a small "server" library using #ServiceWorker APIs.

Would be interesting to wrap such an app in an installer to "bring your own server," maybe in a #WebBundle or #HybridApp.

Probably not much practical use, but could be useful for interactive #SSR demos when you're too cheap to pay for a real server. 🙋

Maarten Stolte
9 months ago

not understanding why the hydration is giving issues if I import the component directly with import() instead of building it first and using those files. #lit #ssr

Stephen Belovarich
9 months ago

#SEO requires good adherence to proper DOM hierarchy, document.title and JSON-LD the latter of which when server-side rendered make it easier for crawlers to read the page. Thanks to the lit-labs/ssr package #SSR is a breeze. Implement a small bit of #node express middleware and you’ve got a #SSR page. I exported declarative Shadow DOM templates for each component that get rendered by #lit even though they are just vanilla #JS, template strings!

Stephen Belovarich
9 months ago

#webcomponents power

The entire experience was built with vanilla #javascript. Individual pages for 4K Blu-ray Disc details score above 95% via lighthouse on performance, #ally, and #seo.

This is because custom elements made #accessibility easy to implement.

Thanks to #lit I could #SSR portions of the app for #SEO.

The #frontend was a breeze to implement because no learning curve from #frameworks. Anyone who knows #html #css and #javascript can #code #webcomponents!

thomas (they/them) 🌺
9 months ago

I also think that the idea around Streaming + Micro Frontends is kind of an evolution of the iframe, except it isn't sandboxed, compatibility within the frameworks your using is problematic. Most people don't really see it this way though. #ssr #streaming #microfrontend #frontend #iframe

Stephen Belovarich
10 months ago

Pretty nice #performance improvement due to #webcomponents and #SSR with @lit-labs/ssr.

Still gotta figure out how to minify inline CSS and HTML with vite, but almost there with a 97% performance score.

Nice side effect of good performance and #SSR, now there's a 100% #SEO score for every standalone page on 🎉

Maarten Stolte
10 months ago

put a first alpha on my beta domain of the SSR'd version of my holiday home site: . Yes, the root path is not yet mapped and there are probably a lot of remaining bugs but it's a start #lit #ssr

Ian VS
11 months ago

@nosherwan For me the choice of framework would depend what I'm trying to build. #AstroJS is awesome for static sites and they're branching into #SSR, and I'm using it for our company's marketing page, but I wouldn't use it for a highly-dynamic admin panel, for instance. I'd love to learn more about #SolidJS sometime, and #quik has some really cool concepts too, like server resume rather than rehydration.

Tane Piper
11 months ago

Trying out #caprover to run a #PaaS service

It was *really* easy to setup #astrojs in #ssr and host in minutes.

Now to look at how this could be commoditised 🤔

Server-side rendering is almost all set up! It'll be an added challenge to remember to separate client-only code with a `typeof window !== 'undefined'` check each time, but I think it'll be worth it!

#JavaScript #ssr

3 years ago

About the psychologist breaking #SSR confidentiality, cold as it sounds, I think it was the right thing to do.

It is not idea. I have no idea where it stands in law, but ethically, it was the correct thing to do.

#SSR's mental health had already become a three ring circus.

4 years ago

How To Improve #React App Performance with #SSR and #Rust [Part II: Rust Web Server] via $DYOR