#SSR
#Enhance: #SSR for #WebComponents
Brian LeRoux @brianleroux discusses @enhance_dev a way to build #webApps with the pure #webStandards.
https://www.infoq.com/presentations/enhance-web-standards/
#webDev #web #tech #javaScript #customElements #html #hateoas
[1/2]
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).
"La #SSR dovrebbe essere sottoposta al Controllo finanze"
Un'iniziativa in tal senso di Marco Romano (Centro) avrebbe trovato ampio consenso alle Camere federali
@westbrook Can I #SSR that with #DeclarativeShadowDom?
@brianleroux
– 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.
2/2
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)thathtml.blog with all the deets!
@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.
@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!
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 hbpmedia.nl | #meestervertellers #ssr #podcast #procesafspraken
#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 👇
https://github.com/angular/angular/releases/tag/16.2.0
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:
https://blog.angular.io/notice-of-xss-issue-affecting-angular-universal-16-1-0-16-1-1-95dbae068f
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.
[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
#8YrsforBaahubaliREBELlion
Lots of exciting developments happening @ fleek.xyz! They are moving their #IPFS storage from #AWS/#DigitalOcean to #Filecoin/#ARWeave! So apps hosted on #Fleek are truly #decentalized!
https://blog.fleek.xyz/post/fleek-platform-update/
#fleek #web3 #webHosting #faas #NFT #NFA #CDN #serverless #SSR #crypto #webDev #webDevelopment
純白の聖乙女ティリア（CV:村川梨衣）＆天誘のグローリーロード（SSR）登場！ https://www.wacoca.com/videos/1791115/voice-actress/
#FFBE #GvG #LR #RPG #SR #SSR #UR #Vlog #voiceactress #アーク #アイドルマスター #アイマス #アリサ #ガチャ #ギルド #ごちうさ #ご注文はうさぎですか？ #ソロ #タクト #とっと #はやかし #マルチ #メグ #ラスクラ #ラストクラウディア #りえしょん #ロマサガ #ロマンシングサガ #声優 #女性声優 #早貸 #村川梨衣 #松田亜利沙 #純白の聖乙女ティリアCV村川梨衣天誘のグローリーロードSSR登場
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.
https://chrlschn.medium.com/nuxt-3-with-ssr-on-google-cloud-firebase-functions-2023-b80f7c4d4b4d
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?
This is biggy: AWS Lambda response streaming
https://aws.amazon.com/blogs/compute/introducing-aws-lambda-response-streaming/
You can now replace Fargate in this architecture https://bit.ly/3xHBnyY
#aws #lambda #ssr #serverless
What is a single-page application (SPA) exactly? How does it relate to client-side rendering (CSR)? (spoiler: SPA doesn't necessarily imply CSR.)
OK, I felt like this deserved a blog post: https://blog.ltgt.net/naming-things-is-hard-spa-edition/
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)
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
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: https://youtu.be/86vI01GDZXo
#ssr #java #springboot #htmx
#Conservation of Nara Park #deer results in unique #genetic lineage.
https://phys.org/news/2023-03-nara-deer-results-unique-genetic.html
I just started playing around with #Preact #SSR with #htm and the first thing I did was render the classic:
```
render(html`
<!DOCTYPE html>
<html>
<head>
<title>Preact</title>
<meta charset="utf8">
</head>
<body>
<h2>Hello, World!</h2>
</body>
</html>
`)
```
And this intuitively output:
```
html
<head>
<title>Preact</title>
<meta charset="utf8" >
<body>
<h2>Hello, World!</h2>
</body>
</head>
```
Lolwat?
* `<!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 (https://github.com/preactjs/preact-render-to-string/issues/201) 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!
Choose one, @astro or @eleventy
#frontend #javascrypt #SSR
For the #performance engineer in all of us
You can get a #tshirt today on @threadless, discounted for a limited time!
#nextjs #astro #quik #ssr #frontend #coding #javascript
https://tokenartist.threadless.com/designs/im-begging-you-to-stop-bundling-so-much-javascript-white
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
Das #ZDF, immer in wenig hinterher.
ZDF will Alternative zu Twitter und Co. entwickeln lassen
https://www.dwdl.de/nachrichten/91673/zdf_will_alternative_zu_twitter_und_co_entwickeln_lassen/
Könnten ja mal det.social fragen, wie sowas geht.
#ForschungsprojektfüroffenenDialogimNetz #PublicSpacesIncubator #CBC #SRG #SSR #RTBF #New_Public
@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.
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!
https://tom-sherman.com/blog/remix-suspense-for-client-only-components
@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.
@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.
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: https://github.com/mantinedev/mantine/issues/2815
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 https://v6.mantine.dev/styles/rem/
「 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 」
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.
#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. 🙋
#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!
#webcomponents power https://ultrahdzone.com
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!
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
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 https://ultrahdzone.com 🎉
put a first alpha on my beta domain of the SSR'd version of my holiday home site: https://beta.familievakantiehuis.nl/home . Yes, the root path is not yet mapped and there are probably a lot of remaining bugs but it's a start #lit #ssr
@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.
Trying out #caprover to run a #PaaS service
It was *really* easy to setup #astrojs in #ssr and host in minutes.
https://whoooo.paas.tane.codes/
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!
How To Improve #React App Performance with #SSR and #Rust [Part II: Rust Web Server] http://www.xn--nnaa.cc/RPmZqR via @hackernoon@twitter.com $DYOR