Dino Geek, try to help you

How to make an SSR application with Reactjs?


Server Side Rendering (SSR) is a famous technique for rendering a normally, in this case, client-side React.js application on the server. This enhances the loading speed of an application.

Below is a simple example of how to create an SSR application with React:

1. Start by creating a new React application:

```
create-react-app ssr-react
```
1. Do all your setup for your modules/routes.

1. Now install two important libraries called `express` and `react-dom/server`.

```
npm install express react react-dom react-router react-router-dom
```

1. Then, create an Express application:

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

```
const server = express()
```

1. Now, set a middleware:

```
server.use(‘/static’, express.static(path.join(__dirname, ‘..’, ‘build’, ‘static’)))
```

1. Create a universal routing and rendering:

```
server.get(‘*’, (req, res) => { res.write( ` Universal Reacl

` ) const stream = renderToNodeStream( ) stream.pipe( res, { end: false }) stream.on(‘end’, () => { res.write( `
` ) res.end() }) })

server.listen(3000)
```
The server.get(‘\*’,..) is the universal route. It matches all URL’s and send the complete HTML page with `#root` div which is the mount point for your React app.

1. Replace ReactDOM.render():

ReactDom.render() is a client-side method and should be replaced with renderToString(), a synchronous method recommended for server-side rendering (SSR). While used with SSR, it makes the app faster and provides SEO optimizations.

```
import { renderToString } from ‘react-dom/server’

const html = renderToString()
```
1. Send HTML to the client:

```
res.send(html)
```
1. Run the app:

```
node server.js
```
1. Now navigate to `http://localhost:3000` in your browser to see your React SSR app in action.

This is a bare minimum setup for creating an SSR application with React. For a full-blown production-ready application, you need to consider other aspects such as data fetching, performance optimization, code splitting, etc.

Always remember SSR apps require more computational resources on the server-side, so always consider whether you need SSR or not. If your focus is an initial page load time and SEO, go with SSR. If your focus is on user interactions, go with CSR (Client Side Rendering).


Simply generate articles to optimize your SEO
Simply generate articles to optimize your SEO





DinoGeek offers simple articles on complex technologies

Would you like to be quoted in this article? It's very simple, contact us at dino@eiki.fr

CSS | NodeJS | DNS | DMARC | MAPI | NNTP | htaccess | PHP | HTTPS | Drupal | WEB3 | LLM | Wordpress | TLD | Domain name | IMAP | TCP | NFT | MariaDB | FTP | Zigbee | NMAP | SNMP | SEO | E-Mail | LXC | HTTP | MangoDB | SFTP | RAG | SSH | HTML | ChatGPT API | OSPF | JavaScript | Docker | OpenVZ | ChatGPT | VPS | ZIMBRA | SPF | UDP | Joomla | IPV6 | BGP | Django | Reactjs | DKIM | VMWare | RSYNC | Python | TFTP | Webdav | FAAS | Apache | IPV4 | LDAP | POP3 | SMTP

| Whispers of love (API) | Déclaration d'Amour |






Legal Notice / General Conditions of Use