5 ms·

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

• v0idzer0 3y ago
  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
• hoofhearted 3y ago
  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://www.elegantframework.com/ https://github.com/elegantframework/elegant-cli https://github.com/elegantframework/elegant-cli
• seabysalt 3y ago
  Definitely next.js that's why it's also way better for SEO than react
• yieldcrv 3y ago
  Can next js do this?
  • josephd79 3y ago
    It can do client or server side rendering.
    • quickthrower2 3y ago
      So can vanilla PHP and JQuery. Question is: what is the DX like?
  • justanother_guy 3y ago
    Same question
• pcthrowaway 3y ago
  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.
  • Leftium 3y ago
    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/ 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-enhancement https://kit.svelte.dev/docs/form-actions#progressive-enhance... [2]: https://kit-git-sverdle-svelte.vercel.app/sverdle https://kit-git-sverdle-svelte.vercel.app/sverdle [3]: https://www.youtube.com/live/A8jkJTWacow?feature=share&t=29085 https://www.youtube.com/live/A8jkJTWacow?feature=share&t=290... [4]: https://kit.svelte.dev/docs/seo#out-of-the-box-ssr https://kit.svelte.dev/docs/seo#out-of-the-box-ssr [5]: https://kit.svelte.dev/docs/form-actions https://kit.svelte.dev/docs/form-actions
    • pcthrowaway 3y ago
      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)
• ushakov 3y ago
  Remix
• satvikpendem 3y ago
  NextJS does this.
  • quickthrower2 3y ago
    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.
    • qgin 3y ago
      NextJS has some ways around it that don't end up duplicating any logic: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props https://nextjs.org/docs/pages/building-your-application/data...