K O logo
Web Development

Project WebApp — React on the server and the JAMstack

Author

Kalle

Date Published

The AI-generated image depicts a futuristic, tech-themed workspace filled with servers, monitors displaying code, and various tech gadgets. A glowing orb sits atop a central server rack. The scene is adorned with symbols resembling atoms and tech logos, creating a high-tech, sci-fi atmosphere.

If you dig a bit deeper into the react-dom package you will find a sub folder called server and there is a function renderToString. As the name suggests it will return an HTML string instead of creating DOM-elements in the browser, this string can then be sent as a result of a client request.

The hello-world example with micro and babel-node:

1import micro from "micro";
2import React from "react";
3import ReactDOMServer from "react-dom/server";
4
5const server = micro(async (req, res) => {
6 return ReactDOMServer.renderToString(<h1>Hello world!</h1>);
7});
8
9server.listen(3000);

This server sends an h1 tag with the text "Hello world!" as a response to each request. A real world application would collect some data from a database or other sources and inject it as props into the react app to populate the generated markup with relevant content. A little more complex but still very basic example to play with can be cloned from here.

But because there are many pitfalls like state management, content compression, routing and many many other complicate problems when rendering a webapp on the server you should take some libraries for help.

One simple and powerful framework is next.js. It runs as a node server and allows you to have complex logic on the server and interactive react features at the same time. Here is a nice video by Guillermo Rauch presenting the framework on React Conf 2017.

Another way to create a website is working with the JAMstack. JAM stands for JavaScript, APIs and Markup. That means split you project into a server that has an API but doesn't render any UI and a frontend consisting of HTML files linking to script files. So everything not dynamic (depending on API calls) can be pre-rendered to static files which can be distributed to the users via an CDN. One of the go-to solutions for generating static files from a react project is Gatsby. Like next.js it provides many useful abstractions to handle many of the common pitfalls. It has also a growing collection of plugins and starters which provide even more magic.

As a first example to play with I can provide this page itself it is based on the gatsby-starter-blog and the code is hosted on github. As it's data-source to generate pages for each blog post it uses markdown files, which are read on build time and then provided to the react components through a graphql API.

One of the easiest hosting solutions for a gatsby page is netlify. You just connect your git repository containing the code of the page and on every push to master a new build is created and published. With netlify cms there even exists a CMS solution with an user friendly interface to write content.

Tasks

 This AI-generated image presents a highly creative and futuristic workspace centered around data visualization and coding, particularly with a focus on React.js. The main scene features a large monitor displaying a 3D grid or terrain model, surrounded by colorful data visualizations and graphs on additional screens. The desk is cluttered with various tech gadgets, including a laptop, a drawing tablet displaying more data visualizations, a coffee mug with the React logo, and small robotic figures. The wall behind the monitor is adorned with floating, glowing spheres and geometric shapes, contributing to the high-tech, almost otherworldly atmosphere. A desk lamp casts a warm light on a potted plant, adding a touch of natural life to the otherwise digital-centric environment. The overall aesthetic combines elements of advanced technology, creativity, and data science in a visually striking and immersive setting.

Project WebApp — Declarative animations with react-pose

Learn how to create declarative animations in React using the react-pose library. This guide explains how to define component poses and transitions, and use the PoseGroup component for managing animations, with practical examples and exercises.

Mailing List

If you want to receive updates on new posts, leave your email below.