Skip to the content.
23 December 2024
## What is Node.js? [Node.js](https://nodejs.org/en/about/) is a JavaScript runtime built on Chrome's [V8](https://v8.dev/docs) engine. It lets developers execute JavaScript on the server side to build backend applications. Because Node.js handles concurrent connections efficiently through an event-driven, non-blocking I/O model, it is a great choice for real-time applications like chat servers, live feeds, or online games. Node.js is single-threaded, meaning it executes one task at a time in its main loop, but delegating I/O operations to the system allows it to scale effectively. It also features a massive registry of open-source libraries, called npm, which speeds up development. You can also use Node.js to write command-line tools or even desktop applications. To try Node.js, download it from the official site and create a plain text file with a `.js` extension. Here is a simple server that listens on port 5000 and returns a text message: ```javascript const http = require("http"); const server = http.createServer((req, res) => { res.end("Hello World!"); }); server.listen(5000, () => { console.log("Server listening on port 5000"); }); ``` Using the built-in `http` module is fine for small scripts, but as your project grows, a backend framework like Express.js helps keep your code organized and maintainable. ## What is Express.js? [Express.js](https://expressjs.com/) is a lightweight, flexible web framework for Node.js. It simplifies the process of building web applications and RESTful APIs. Express.js makes it easier to write applications by providing: - A simple routing system to map different HTTP request methods and URLs to specific functions. - Middleware integration to intercept, parse, or modify incoming requests, validate tokens, or handle application errors. - Built-in support for serving static files, reading form submissions, and integrating with HTML template engines. To install Express.js in your project directory, initialize your package configuration and run the install command: ```bash npm init -y npm install express ``` Now you can create a basic Express application that serves a "Hello World!" message: ```javascript const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("Hello World!"); }); app.listen(5000, () => { console.log("Express server listening on port 5000"); }); ``` The `app.get()` method registers a route that handles GET requests to your homepage. ## How to render a React application from the server? Server-rendered [React](https://reactjs.org/) applications generate HTML on the server instead of waiting for the browser to build the page using JavaScript. This approach improves search engine optimization (SEO), speeds up initial page load times, and makes it easier for crawlers to index your content. You can set up server-side rendering (SSR) by combining Node.js, Express, and the `react-dom/server` package to transform your React components into a static HTML string. Here is a simplified example of an Express server rendering a React component: ```jsx const express = require("express"); const React = require("react"); const ReactDOMServer = require("react-dom/server"); const app = express(); app.get("/", (req, res) => { const html = ReactDOMServer.renderToString(); res.send(` My App
${html}
`); }); app.listen(5000, () => { console.log("Express server listening on port 5000"); }); ``` This renders `` into an HTML string and embeds it directly in the page container before sending it to the client. ## How to tell the client browser that the app was rendered from the server? Once the browser receives and displays the static server-rendered HTML, it needs to wire up your interactive React events (like click handlers and form submissions). This process is called client-side hydration. To hydrate the page, you load your React application on the client side and run the `ReactDOM.hydrateRoot()` method on the root container where your server-rendered HTML is located. Here is how you use hydration on the client side: ```jsx import React from "react"; import ReactDOM from "react-dom/client"; import YourReactComponent from "./YourReactComponent"; ReactDOM.hydrateRoot(document.getElementById("root"), ); ``` This tells React to scan the existing server-rendered HTML inside the `#root` element and attach the necessary event listeners without rebuilding the entire DOM structure from scratch. If you are building a client-only application, you should use `createRoot` and `render` instead. Data-fetching during server-side rendering is a deeper topic that deserves its own focused guide.