Using Next.JS and Redux for Epic Noscript Web Apps

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

A short exploration of a method for building websites that work without JS, while still enjoying the convenience of modern frontend and backend technologies - with live coding!

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

Individuals may choose to disable JavaScript for several reasons including improved performance, faster load times, fewer interruptions like popups, enhanced privacy by avoiding tracking scripts, and increased security by mitigating risks like cross-site scripting and other vulnerabilities associated with ad networks.

Web applications can function without JavaScript by utilizing server-side processing and forms to manage interactions. When JavaScript is disabled, actions like button clicks result in form submissions that are processed server-side, allowing the server to handle state management and rendering of the updated application state.

In the no-script version, instead of using JavaScript event handlers, buttons were wrapped in forms. These forms handle submissions directly, sending the action to the server when JavaScript is disabled. When JavaScript is enabled, the default form submission is prevented, and actions are handled client-side.

Yes, async actions can be handled in a no-script web app by passing the name of an action creator to the server. The server then awaits the dispatch of the action creator, processes the action asynchronously, and updates the state accordingly, ensuring the functionality remains consistent with or without JavaScript.

Potential drawbacks include increased server load due to handling more actions server-side, potential loss of dynamic client-side interactions like animations or immediate feedback, and additional complexity in managing forms and submissions for every user interaction.

Styles in no-script scenarios can still be applied as usual, though some issues may arise in development mode with frameworks like Next.js. In production, styles should render correctly even if JavaScript is disabled, ensuring the visual appearance remains consistent.

The main advantage of using Next.js and Redux for no-script web apps is the ability to create applications that function seamlessly both with and without JavaScript enabled in the browser. This approach allows for consistent performance and user experience by ensuring the same HTML is rendered and state management is maintained across both scenarios.

Daniel Skogly
Daniel Skogly
21 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Talk explores developing web applications that work without JavaScript enabled in the browser, while still enjoying the benefits of modern web technologies. The speaker demonstrates converting an existing application to work without JavaScript by wrapping buttons in a form and preventing the default submit event. React helpers are introduced to handle async actions and the speaker shows how to make a counter app work without JavaScript by removing unnecessary callbacks and changing buttons to a button component. The talk also covers adding a form and a surprise feature, and emphasizes that by leveraging forms and an event-based store, applications can seamlessly work with or without JavaScript.

1. Introduction to No-Script Web Apps

Short description:

In this talk, I will explore a method to develop applications that work without JavaScript enabled in the browser while still enjoying the benefits of modern web technologies. I will show you a TodoMEC application that works with and without JavaScript. There are several reasons why someone would disable JavaScript, including performance, fewer popups, faster load times, and increased security. I added making my wishlist service work without JavaScript to my task list because it's privacy-friendly and can function without JavaScript. However, I didn't know how to achieve this with Redux and server-side rendering.

Hi, my name is Daniel and I'm a web developer and a privacy enthusiast based in Oslo, Norway. Thank you for tuning in to this talk about using Next.js and Redux for epic no-script web apps, which will be a short exploration of a method that will enable you to develop applications that work without JavaScript enabled in the browser while still enjoying the benefits and convenience of modern web technologies when making them.

Right off the bat, I want to show you this. This is your standard TodoMEC application, where you can add stuff, edit stuff, check stuff off, filter them and clear them. And here it is again. And I want you to pay close attention and see if you can spot any difference. So we can add stuff, we can say whoops, and edit stuff, check off stuff, apply some filters and we can clear them. So, notice anything? Well, this last one was entirely without JavaScript in the browser. And what's so exciting is that this was both the exact same React application, the exact same HTML rendered to the DOM. And I find that pretty cool, that we can have one application that seamlessly works both with and without JavaScript.

But why would anyone disable JavaScript in the first place? Well, there are several reasons, actually. One of them is performance. When there's no JavaScript running in the background, then your computer has more resources to do other stuff. Another one is fewer popups. When you disable JavaScript, you don't have any of the pull screen newsletter signups or slides up from the bottom, scroll hogging or content that are suddenly applied to the website that makes the scrolling jump and stuff like that. You also have faster load times, as obviously you're not loading the JavaScript, so the page will load faster. And a contributing factor to that is that you're not loading the tracking scripts and the ad networks that in themselves aren't really wanted most of the time. Some users will also disable JavaScript because of increased security. There are examples in the past where ad networks have been used as an attack vector for browser vulnerabilities. And by disabling JavaScript, you avoid them and you also avoid stuff like cross-site scripting. I run a wishlist service called Wishigift. And back in 2018, I added this to the task list, make the site work without JavaScript. Because it's a privacy-friendly wishlist service, and I figure that maybe our most privacy-minded users would like to have an experience that works without JavaScript. And also it's nice to be able to post something on Hacker News without the comments saying that this doesn't work without JavaScript. But also because it's the kind of website that can work without JavaScript or perhaps even should, I don't have any WebGL experiences, or I'm not using any web APIs in a heavy way. It's basically a glorified CRUD application, as are many other applications. And I think that those kinds of websites that can work without JavaScript also should. But I had no idea how. I was using Redux for absolutely everything. And I also dabbled a bit in server-side rendering.

2. Converting App to Work Without JavaScript

Short description:

To convert an existing application to work without JavaScript, wrap buttons in a form and prevent the default submit event. If JavaScript is enabled, the event is prevented, and the action is dispatched client-side. If JavaScript is disabled, the request hits the server, and the server dispatches the action and re-renders the application server-side. The resulting state and HTML are the same in both scenarios.

So I just started some background processing. Asked myself, what's available when JavaScript is disabled? It's just HTML and CSS. Okay. How can I convert this already existing application to one that works without JavaScript? No idea. And how can I do it in a way that's maintainable? Because I didn't want to have two separate codebases that would need to be maintained.

Well, fast forward to 2020, and I think I wake up one day, and my mind has put some pieces together. I realized that one of the tenets of Redux, which is thou shalt only put serializable values in state or actions, goes very well with, or actually aligns perfectly with a certain type of payload that's also serializable. Well, talking about forms, the solution was there all along. Instead of having standalone buttons, I could simply wrap them in a form and prevent default on the submit so that if there was JavaScript enabled, the event would be prevented. And if there wasn't, well, it just hit the server and we can have our server dispatch whatever action that we want to perform.

So instead of having just a simple click handler on a button, instead we do something like this. We wrap it in a form and set the action to just an empty string so that when you submit this form, it's going to be sent to the same route that we're already at, which means a view route. And we make the assumption that the only reason why anyone would ever do a post request to a view routes is because they are submitting this kind of form that wraps an action that they want to perform. And inside it, we embed the current state or the client state, the app state and also the kind of action that we want to be dispatched. And we will replace our button type button with a submit button. And you can also omit the type attribute here.

Then in our app.js, if you're using Next.js that is, we have this get initial props, and we check for if this is a post request, well, then we want to read the body and the body will look something like this. It'll have an action type, for example, and the state. And we pass that along to a helper function. Now we'll parse the payload. Using the callback that we supplied, getReduxStore, it'll take the parsed state in the payload and create a new ReduxStore with that. And also dispatch the action in the payload to that ReduxStore and return the updated ReduxStore and the updated state. Then we can assign that to our preloaded state and re-render our application with that state.

So when JavaScript is enabled, user clicks the button, the event is prevented and the action is dispatched. State is updated and the React application re-renders client side. And it's quite similar when JavaScript is disabled, except that we can't prevent default. So the request will hit the server and our server will parse the payload and dispatch the action, get the updated state and re-render the React application server-side. And in both scenarios, the end result is the exact same. The state you end up with is exactly the same. And also, the HTML is exactly the same.

3. React Helpers and Handling Async Actions

Short description:

To help us with this, I've created some React helpers that I've added in an npm package. The most important component is the form component that embeds the state. It selects the state from the Redux and embeds it into the form. It also handles the submit by preventing defaulting on the client side and parsing the payload. We're serializing both the action and the payload into the form. We also have a button that wraps in the form component and passes along the necessary props. For async actions in a no-script scenario, we need to call and await the action creator instead of simply telling the server to dispatch an action.

To help us with this, I've created some React helpers that I've added in an npm package. And the most important component is the form component that embeds the state. It selects the state from the Redux and embeds it into the form. And also handles the submit. Which means preventing defaulting on the client side and parsing the payload. Because instead of just passing objects, we're actually typing out all the... We're serializing both the action and the payload into the form. So it parses the form payload and also dispatches any action contained within.

We also have a button, which is a simple helper that just takes a button and wraps it in the form component. And also passes along the necessary props. And you can find this on at witchy-gift.com. But I hear you. First of all, you were promising epic webapps. And second of all, how would you do it with async actions? Well, I got a solution for that as well. Who'da thunk?

So here we have a pretty simple application that enables you to search for epics. So we can search for Homer or we can just do an empty search and list all the epics on the project Gutenberg. And so client-side, this is talking with a third party API called Gutendex. You can see we have this spinner and stuff, and you can also see in the top right here, we have an indicator saying if this page was loaded on a GET request or a POST request. Now, in a no-script scenario, instead of simply telling the server to dispatch an action, that wouldn't do. It wouldn't suffice because we're having async actions. So we actually need to call and await the action creator. And as you'll see, this also works perfectly fine. You can see this time it was done with a POST request and everything works. The functionality is exactly the same. We don't have any spinner, of course. We don't have any loading indicator because we don't have any JavaScript to trigger that with. But that also shows that when you have JavaScript enabled, feel free to add any extra juicing that you might find suitable. It's just that essential interactions need to work without JavaScript. So what happens here, is that instead of dispatching an action, or telling the server to dispatch an action, we're passing along the name of an action creator. And we have a mapping from action creators to their functions.

4. Making the Counter App Work Without JavaScript

Short description:

And when there's an action creator, the server will await the dispatch of the action creator. Here's a simple counter app that can increment, decrement, and set a custom amount. Disabling JavaScript results in non-functionality because JavaScript is used for all of this. To make it work without JavaScript, remove unnecessary callbacks, import helper components, and change buttons to the button component. The styles disappear when JavaScript is disabled in development mode, but the functionality remains.

And when there's an action creator, the server will notice that and just await the dispatch of the action creator.

And now for some exciting live coding. Okay, so here's a simple counter app. So it can increment, it can decrement. You can also set a custom amount and increment and decrement by that amount. But now if we disable JavaScript, you'll see that nothing works. And that is because we're using JavaScript for all of this.

Let's just change this into dev mode. And you can see we have all these callbacks and onClick handlers. So let's make this work without JavaScript. First of all, let's get rid of everything we don't need, which is all the callbacks. We won't be using any onClick handlers, nor will we be needing the onChange and the value here. Then let's import our helper components. Let's import the button and let's import the form. And let's just comment out this bottom part so we can fix that later.

So first of all, we'll change these normal buttons to... Sorry, I also forgot we have to remove this type button because we want these to actually submit the forms. So let's change these buttons to the button component. And our first one should... So the button component takes in an Action. And our first one should be the decrement Action. And our second one should be the increment Action. Let's see here if this works. So we can decrement, we can increment. Nice. Okay. And if we disable JavaScript... So, first of all, the styles disappear because Next.js doesn't really like having JavaScript disabled in development mode. But our functionality still works, which is the important part. And I'll show you later the styles in a production build.

5. Adding Form and Surprise

Short description:

We added the action to submit and used the button component instead of a normal button. For this part, we changed the wrapper to be the form component. When pressing the first button, it will decrement by the amount entered in the input. Pressing the second button will increment by the entered amount. We also added a surprise by generating a random number between -50 and 50 using the increment by amount action.

It works as you would expect. Okay, so we got that working and it was just a tiny change. This is less code than before. We just added the action that we wanted to submit and used the button component instead of a normal button.

So, for this part, where you can select your own amount, we'll just change this wrapper to be our form component. And then we want to actually use these normal buttons. But we want it to be so that when you press the first button, it will use the value from this input and decrement by that amount. And if you press the second button, we want to use this value again but increment. And we can do that by saying that the button should have name action type and the value of decrement by amount dot type. And what will happen here is that when the form is submitted by pressing this button, only the value of the submitted button will be in the payload itself and client side on the event dot submitter. So we do the same here. We say that name should be action type, which corresponds to the name of the action, should in this case increment by amount dot type. And we also have to say that the payload is this number input. Let's try. OK, sorry. We also have to specify that the payload should be JSON. So now this works correctly. And if we disable JavaScript as well, that also works. Cool.

But I want to add one last thing. I like surprises. So let's add a little surprise as well. Let's give this some styles. And we'll add a button here with the class name of button and surprise. So I want to add a random number between minus 50 and 50. And we can do this by using the action of course, and increment by amount. And pass in, just some quick math here. Get a random number, multiply that with 100, and subtract 50, and if we check this out, this works beautifully. And... If we disable JavaScript, this also works.

6. Working Without JavaScript

Short description:

If we refresh the page, we get the same number because we resend the same state and hardcoded random numbers. Instead of using just an action, we pass the name of an action creator called increment by surprise. This allows us to get a new random number every time, even when JavaScript is disabled. There are some caveats, such as essential interactions not working without JavaScript and the increased server load. However, by leveraging forms and an event-based store, we can create applications that work seamlessly with or without JavaScript.

Great. But the thing is that if you decide to refresh the page, you'll see that we get the exact same number every time. And that's because we're resending the exact same state and we also hardcoded the random numbers. And that is also being resend when we resubmit the form. That's not very surprising, is it?

So instead of using just an action, we'll just pass the name of an action creator. And I made this called increment by surprise. And if we click that, we'll see we still get a random number. And if we disable JavaScript and we refresh, we get a new random number each time. Because now the action creator is being run server side, which regenerates the random number every time. And I wanted to show you this as well. If I actually do a production build here and start the server, you see that the styles actually work without JavaScript as well. So it's just in dev mode.

OK, so there are some caveats with employing this method. And one of them is that you can't have any essential interactions usable only through JS events. So you can't have any, as I said, essential interactions behind things like a hover, or drag and drop, or a long press, and stuff like that. And there's some extra markup that you have to consider when styling because we're adding forms everywhere. There's also lots of refreshing. And I'd say that this isn't really a caveat or an issue. Because oftentimes, for a user without JavaScript enabled, the alternative would be no application or just no updates. And there's an increased server load because we're telling our server to handle more stuff, dispatch actions, and more re-renders that we can't optimize like we can the static GetPages. And when you add GetInitialProps to your Next.js pages, you lose some optimization, which is also sad. I wish there was a way to only enable the GetInitialProps on Post requests, so maybe that'll come someday. Fingers crossed.

And to summarize. By leveraging forms and an event-based store, we can have one application that will seamlessly work whether or not the user has JavaScript enabled in the browser or not. And we can use some helper components to make our lives easier when developing an application like this. But this implementation in itself might not be perfect. I'm well aware of that. What I'm presenting to you is simply a generalized approach or a way of thinking about making applications that work without JavaScript. And if you know of a better way or can think of a better way, or have suggestions and ideas on how to improve this, I'd love to hear them. And please reach out to me. I'm at Portrait2K on Twitter and everywhere. And I'd love to hear what you've done and if you're using this and what do you think about it. So thank you for watching this talk. And big thanks to React Advanced for having me.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
ESM Loaders: Enhancing Module Loading in Node.js
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Top Content
ESM Loaders enhance module loading in Node.js by resolving URLs and reading files from the disk. Module loaders can override modules and change how they are found. Enhancing the loading phase involves loading directly from HTTP and loading TypeScript code without building it. The loader in the module URL handles URL resolution and uses fetch to fetch the source code. Loaders can be chained together to load from different sources, transform source code, and resolve URLs differently. The future of module loading enhancements is promising and simple to use.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
Out of the Box Node.js Diagnostics
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
This talk covers various techniques for getting diagnostics information out of Node.js, including debugging with environment variables, handling warnings and deprecations, tracing uncaught exceptions and process exit, using the v8 inspector and dev tools, and generating diagnostic reports. The speaker also mentions areas for improvement in Node.js diagnostics and provides resources for learning and contributing. Additionally, the responsibilities of the Technical Steering Committee in the TS community are discussed.
The State of Node.js 2025
JSNation 2025JSNation 2025
30 min
The State of Node.js 2025
The speaker covers a wide range of topics related to Node.js, including its resilience, popularity, and significance in the tech ecosystem. They discuss Node.js version support, organization activity, development updates, enhancements, and security updates. Node.js relies heavily on volunteers for governance and contribution. The speaker introduces an application server for Node.js enabling PHP integration. Insights are shared on Node.js downloads, infrastructure challenges, software maintenance, and the importance of update schedules for security.
Node.js Compatibility in Deno
Node Congress 2022Node Congress 2022
34 min
Node.js Compatibility in Deno
Deno aims to provide Node.js compatibility to make migration smoother and easier. While Deno can run apps and libraries offered for Node.js, not all are supported yet. There are trade-offs to consider, such as incompatible APIs and a less ideal developer experience. Deno is working on improving compatibility and the transition process. Efforts include porting Node.js modules, exploring a superset approach, and transparent package installation from npm.

Workshops on related topic

Node.js Masterclass
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Top Content
Workshop
Matteo Collina
Matteo Collina
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
Top Content
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Building a Hyper Fast Web Server with Deno
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
Workshop
Matt Landers
Will Johnston
2 authors
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
GraphQL - From Zero to Hero in 3 hours
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
Pawel Sawicki
Pawel Sawicki
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
Mastering Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.