
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@brendonjohn/react-ssr-express
Advanced tools
props
props
Head
component for better SEOprocess.env.NODE_ENV !== 'production'
Install it:
$ npm install --save @react-ssr/core @react-ssr/express express react react-dom
And add a script to your package.json like this:
{
"scripts": {
"start": "node server.js"
}
}
Then, populate files below inside your project:
.babelrc
:
{
"presets": [
"@brendonjohn/react-ssr-express/babel"
]
}
server.js
:
const express = require('express');
const register = require('@react-ssr/express/register');
const app = express();
(async () => {
// register `.jsx` or `.tsx` as a view template engine
await register(app);
app.get('/', (req, res) => {
const message = 'Hello World!';
res.render('index', { message });
});
app.listen(3000, () => {
console.log('> Ready on http://localhost:3000');
});
})();
views/index.jsx
:
export default function Index({ message }) {
return <p>{message}</p>;
}
Finally, just run npm start
and go to http://localhost:3000
, and you'll see Hello World!
.
ssr.config.js
)Here is the default ssr.config.js
, which is used by react-ssr
when there are no valid values:
module.exports = {
id: 'default',
distDir: '.ssr',
viewsDir: 'views',
staticViews: [],
webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {
return config;
},
};
ssr.config.js#id
The id of UI framework. (default: default
)
It can be ignored only when the project does not use any UI frameworks.
Supported UI frameworks are:
default
doesn't need to be specified in ssr.config.js
)
For example, if we want to use emotion
, ssr.config.js
is like this:
module.exports = {
id: 'emotion',
};
ssr.config.js#distDir
The place where react-ssr
generates production results. (default: .ssr
)
If we use TypeScript or any other library which must be compiled, the config below may be useful:
module.exports = {
// dist folder should be ignored by `.gitignore`
distDir: 'dist/.ssr',
};
ssr.config.js#viewsDir
The place where we put views. (default: views
)
A function res.render('xxx')
will render views/xxx.jsx
or views/xxx.tsx
.
A working example is here: examples/basic-custom-views
ssr.config.js#staticViews
If specified, react-ssr
generates html cache when production:
module.exports = {
staticViews: [
'auth/login',
'auth/register',
'about',
],
};
ssr.config.js#webpack()
module.exports = {
webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {
// we can override default webpack config here
return config;
},
};
Just put _document.jsx
or _document.tsx
into the views root:
views/_document.jsx
:
import React from 'react';
import {
Document,
Head,
Main,
} from '@react-ssr/express';
export default class extends Document {
render() {
return (
<html lang="en">
<Head>
<title>Default Title</title>
<meta charSet="utf-8" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<body>
<Main />
</body>
</html>
);
}
};
Note:
<Main />
component directly under <body>
tag and don't wrap <Main />
component with another components, because this is a hydration target for the client.And then, use it as always:
views/index.jsx
:
const Index = (props) => {
return <p>Hello World!</p>;
};
export default Index;
A working example is here: examples/basic-custom-document
Head
We can use the Head
component in any pages:
views/index.jsx
:
import React from 'react';
import { Head } from '@react-ssr/express';
const Index = (props) => {
return (
<React.Fragment>
<Head>
<title>Dynamic Title</title>
<meta name="description" content="Dynamic Description" />
</Head>
<p>Of course, SSR Ready!</p>
</React.Fragment>
);
};
export default Index;
A working example is here: examples/basic-dynamic-head
default
doesn't need to be specified in ssr.config.js
)
Like semantic-ui, non CSS-in-JS frameworks are supported without extra configuration.
All we have to do is to load global CSS in _document
or each page:
views/_document.jsx
:
import React from 'react';
import {
Document,
Head,
Main,
} from '@react-ssr/express';
export default class extends Document {
render() {
return (
<html lang="en">
<Head>
<title>A Sample of Semantic UI React</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
</Head>
<body>
<Main />
</body>
</html>
);
}
}
In order to enable SSR, we must install babel-plugin-import
as devDependencies.
And then, populate .babelrc
in your project root:
{
"presets": [
"@brendonjohn/react-ssr-express/babel"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
A working example is here: examples/with-jsx-antd
In order to enable SSR, we must install these packages:
And then, populate .babelrc
in your project root:
{
"presets": [
"@brendonjohn/react-ssr-express/babel"
],
"plugins": [
"emotion"
]
}
A working example is here: examples/with-jsx-emotion
We can use material-ui without extra configuration.
A working example is here: examples/with-jsx-material-ui
In order to enable SSR, we must install babel-plugin-styled-components
as devDependencies.
And then, populate .babelrc
in your project root:
{
"presets": [
"@brendonjohn/react-ssr-express/babel"
],
"plugins": [
"styled-components"
]
}
A working example is here: examples/with-jsx-styled-components
To enable TypeScript engine (.tsx
), just put tsconfig.json
in your project root directory.
The code of TypeScript will be like this:
package.json
:
{
"scripts": {
"start": "ts-node server.ts"
}
}
server.ts
:
import express, { Request, Response } from '@react-ssr/express';
const app = express();
app.get('/', (req: Request, res: Response) => {
const message = 'Hello World!';
res.render('index', { message });
});
app.listen(3000, () => {
console.log('> Ready on http://localhost:3000');
});
views/index.tsx
:
interface IndexProps {
message: string;
}
export default function Index({ message }: IndexProps) {
return <p>{message}</p>;
}
.jsx
.tsx
Introducing an Alternative to NEXT.js
[Express] React as a View Template Engine?
FAQs
React SSR as a view template engine
The npm package @brendonjohn/react-ssr-express receives a total of 2 weekly downloads. As such, @brendonjohn/react-ssr-express popularity was classified as not popular.
We found that @brendonjohn/react-ssr-express demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.