Ask HN: Any web frontend library that fallbacks to SSR if JavaScript is missing? | Hacker News Reader

Ask HN: Any web frontend library that fallbacks to SSR if JavaScript is missing?

20 points_44815 comments

What web frontend frameworks/libraries are available that fallbacks to server-side rendering if JavaScript is unavailable on the client-side?

I can think of Unpoly, but are there any other options available?

View on HN

I'm pretty sure Svelte and Sveltekit can do this for navigation. Maybe Gatsby too.

But keep in mind a lot of the interactivity won't work the same.

Generally the page is pre-rendered on the server, and then links are hydrated to prevent page refreshes on navigation. If Javascript is off, the browser does a page refresh when the user clicks links, and the server pre-renders those.

In fact, I think a lot of frameworks can do this now: Qwik, Next, etc.

SvelteKit encourages and provides tools for "progressive enhancement"[1]. This means your site will work even if JS is missing.

- There is a SvelteKit clone of Wordle that does not need JS[2] with (video introduction[3])

- I built this SvelteKit app to work without JS: https://multi-launch.leftium.com/

It takes a little effort to ensure your app will work without JS, but SvelteKit tries to make it as easy as possible:

- The first render of your page is done on the server[4]. This ensures the first render has access to JS even if the client doesn't. It's also supposed to decrease the time to first render.

- SvelteKit form actions are designed to work without JS, by default[5].

[1]: https://kit.svelte.dev/docs/form-actions#progressive-enhance...

[2]: https://kit-git-sverdle-svelte.vercel.app/sverdle

[3]: https://www.youtube.com/live/A8jkJTWacow?feature=share&t=290...

[4]: https://kit.svelte.dev/docs/seo#out-of-the-box-ssr

[5]: https://kit.svelte.dev/docs/form-actions

Yeah, I've done the no-JS capable thing for a vanilla Svelte app with an express backend on EC2. Required a bit of bushwhacking to get the svelte routing working on the server, but worked really well in the end.

I think Sveltekit makes this easier, but at the cost of being more complex to self-host (you might get tied to Vercel which employs Rich Harris and makes all the Sveltekit SSR stuff "just work" in ways that I'm concerned won't just work if you're not using vercel)

The Vercel adapter may get some more attention and features first (like ISR[1]), but local development only requires NodeJS. So I think you can self-host SvelteKit anywhere that supports NodeJS. SvelteKit is designed to be serverless-first, but still supports traditional servers-based deploys.

And there are several non-Vercel adapters that should just work (Node, Cloudflare Pages, Cloudflare Workers, Netlify, static site generation)[2].

And even more unofficial adapters[3]!

[1]: https://kit.svelte.dev/docs/adapter-vercel#incremental-stati...

[2]: https://kit.svelte.dev/docs/adapters

[3]: https://sveltesociety.dev/components#adapters

Yes, I have built one on top of Next.js.

What do you think? Is this what you are looking for?

https://www.elegantframework.com/

https://github.com/elegantframework/elegant-cli

React? Pretty trivial to set this up in React. But why fallback when you can just do both. SSR always. Then let the js run if its enabled. This is what Next.js and countless other react frameworks do

Definitely next.js that's why it's also way better for SEO than react

NextJS does this.

How do you do this in NextJS. For example if you use useEffect that will not run on the server. You would need separate client and server code to do the same thing, in which case it is not much "handier" than vanilla PHP with JQuery.

NextJS has some ways around it that don't end up duplicating any logic:

https://nextjs.org/docs/pages/building-your-application/data...

Remix

Can next js do this?

It can do client or server side rendering.

So can vanilla PHP and JQuery. Question is: what is the DX like?

Same question

Reply on news.ycombinator.com