This package is moved to @react-ssr/core.

About react-ssr

- SSR (Server Side Rendering) as a view template engine
- Passing the server data to the client props
- Dynamic props without caring about SSR
- Suitable for dynamic routes like blogging
- Dynamic Head component
- HMR when process.env.NODE_ENV !== 'production'

Packages

| package | version |
| --- | --- |
| @react-ssr/core | !@react-ssr/core !downloads |
| @react-ssr/express | !@react-ssr/express !downloads |
| @react-ssr/nestjs-express | !@react-ssr/nestjs-express !downloads |

Usage

$3

Install it:

``bash
$ npm install --save @react-ssr/express express react react-dom
`

And add a script to your package.json like this:

`json
{
"scripts": {
"start": "node server.js"
}
}
`

Populate files below inside your project:

./.babelrc

`json
{
"presets": [
"@react-ssr/express/babel"
]
}
`

./server.js

`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

`jsx
export default function Index({ message }) {
return

{message}

;
}
`

Then just run npm start and go to http://localhost:3000.

You'll see Hello World!.

$3

Install it:

`bash


install NestJS dependencies

$ npm install --save @nestjs/core @nestjs/common @nestjs/platform-express

install @react-ssr/nestjs-express

$ npm install --save @react-ssr/nestjs-express react react-dom
`

And add a script to your package.json like this:

`json
{
"scripts": {
"start": "ts-node --project tsconfig.server.json server/main.ts"
}
}
`

Populate files below inside your project:

./.babelrc

`json
{
"presets": [
"@react-ssr/nestjs-express/babel"
]
}
`

./tsconfig.json

`json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"isolatedModules": true,
"resolveJsonModule": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
".ssr"
]
}
`

./tsconfig.server.json

`json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
},
"include": [
"server"
]
}
`

./server/main.ts

`ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import register from '@react-ssr/nestjs-express/register';
import { AppModule } from './app.module';

async function bootstrap() {
const app = await NestFactory.create(AppModule);

// register .tsx as a view template engine
await register(app);

app.listen(3000, async () => {
console.log(> Ready on http://localhost:3000);
});
}

bootstrap();
`

./server/app.module.ts

`ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';

@Module({
controllers: [
AppController,
],
})
export class AppModule {}
`

./server/app.controller.ts

`ts
import {
Controller,
Get,
Render,
} from '@nestjs/common';

@Controller()
export class AppController {
@Get()
@Render('index') // this will render views/index.tsx
public showHome() {
const user = { name: 'NestJS' };
return { user };
}
}
`

./views/index.tsx

`tsx
interface IndexProps {
user: any;
}

const Index = ({ user }: IndexProps) => {
return

Hello {user.name}!

;
};

export default Index;
`

Then just run npm start and go to http://localhost:3000, you'll see Hello NestJS!`.

Examples

- examples/basic-blogging
- examples/basic-css-import
- examples/basic-dynamic-head
- examples/basic-jsx
- examples/basic-nestjs
- examples/basic-nestjs-nodemon
- examples/basic-tsx
- examples/custom-document
- examples/custom-views
- examples/with-jsx-antd
- examples/with-jsx-emotion
- examples/with-jsx-material-ui
- examples/with-jsx-semantic-ui
- examples/with-jsx-styled-components

Starters

- react-ssr-jsx-starter
- react-ssr-tsx-starter
- react-ssr-nestjs-starter

Articles

The React View Template Engine for Express

[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)