Hacker News Reader

I couldn't disagree with this article more. Developing SPAs is easier than server-render applications. The problem is React, Redux, and other such libs make this more complicated than necessary. React is all about surgically making the smallest possible change in the DOM to refresh the page. But is that really needed? Most of the time it is not. Why not re-render the whole page? This is what happens in the case of server-render applications any way, right? Turns out 99% of the time it is performant for the SPA to rerender the whole page. Instead of Angular and React, if you use simple libraries such as UIBuilder ( https://github.com/wisercoder/uibuilder ) and MVC router ( https://github.com/Rajeev-K/mvc-router/ ) you can build simpler applications that work well and are super easy to develop and maintain. Each of those libs is less than 500 lines, so super easy to learn and use.

This article says traditional web servers are stateless, but in the case of SPAs servers are stateful. The opposite is true. Traditional web servers have session state, but in the case of SPAs the servers can be stateless because all servers are responsible for is persistence and query/search.

This article says maintaining browser history is a mess in SPAs. Not true. The same MVC architecture that works so well on the server can be done just as easily on the client, see this lib: https://github.com/Rajeev-K/mvc-router/

This article says server-rendering has fewer more mature tools. That may be true. There are so many new tools for SPAs. But you can ignore them and build SPAs trivially using the libs mentioned above.

This article says server-rendering is better for SEO. Not true anymore. Google and Bing crawlers now execute javascript to crawl your content. This is more work for Google and Bing but not more work for you.

If you know how to do it SPAs are the easiest and best approach because all the server needs to do is implement persistence and query/search using a REST API. If you later need a native mobile client this approach is already more compatible with mobile than if the server renders HTML in addition to persistence and query/search.

View on HN

import React, { useState } from 'react'; export const SetterButton = ({ children, ...rest }) => ( <button type="button" {...rest}>{children}</button> ) export const BoxComponent = ({ label }) => { const [value, setValue] = useState(0); return ( <div style={border: '1px solid black'}> {label}: {value} <SetterButton onClick={() => setValue(value + 1)}>+1</SetterButton> </div> ); };

import React, { useState } from 'react'; export const ValueContext = React.createContext(); export const SubComponent = () => ( <div> <p> Here's a value: <ValueContext.Consumer> {({ value }) => value} </ValueContext.Consumer> </p> <p> Here's a button: <ValueContext.Consumer> {({ setValue, value }) => <button type="button" onClick={() => setValue(value + 1)}>+1</button>} </ValueContext.Consumer> </p> </div> ) export const App = () => { const [value, setValue] = useState(); return ( <ValueContext.Provider value={{ value, setValue }}> Some other stuff goes here. <SubComponent></SubComponent> </ValueContext.Provider> ); }