11 React website frameworks

 

This chapter covers

  • Rendering React on the server
  • Developing a fullstack application in Next.js and Remix

React website frameworks allow us to run React on the server. You may wonder why you would want to, and both the short and the long answers are speed and performance. Your page renders a lot faster and your website becomes a lot more performant. These results are good for visitor retention, search engine optimization, and overall user experience—and most likely will also be good for your (or your employer’s) bottom line.

So how does rendering React on the server make the application faster? It seems to involve simply moving the work from one computer (yours) to another (the server). Well, the reasons are many and fairly technical, so I’ll dive into them in section 11.1. For now, let’s summarize the reason: short-circuiting a lot of data transfer round-trips and even bypassing JavaScript to render the page to the visitor in as few milliseconds as possible.

The difference can be huge. Almost any website will be faster if it uses a React website framework (correctly!) rather than a client side–only React application, and some websites get orders of magnitude faster. It’s not uncommon for a page to go from being ready in more than 5 seconds to being ready in less than 1 second. Now, that’s good news!

11.1 What's a website framework?

11.1.1 Fullstack React as a concept

11.1.2 Rendering HTML on the server

11.1.3 Dynamic content

11.1.4 Hydration is necessary

11.2 Implementations

11.2.1 Next.js

11.2.2 Remix

11.2.3 Environment values and API keys

11.3 Let's create a weather app!

11.3.1 Using the URL

11.3.2 Using data in a route

11.3.3 Storing local data

11.3.4 Creating an API

11.4 Alternative React-based website frameworks

Summary