This package is internally used by @xxx-ssr/express and @xxx-ssr/nestjs-express.
Overview
- 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'
Usage
With @xxx-ssr/express
Install it:
$ npm install --save @xxx-ssr/express express react react-dom
And add a script to your package.json like this:
{
"scripts": {
"start": "node server.js"
}
}
Populate files below inside your project:
./.babelrc
{
"presets": ["@xxx-ssr/express/babel"]
}
./server.js
const express = require('express');
const register = require('@xxx-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>;
}
Then just run npm start
and go to http://localhost:3000
.
You'll see Hello World!
.
With @xxx-ssr/nestjs-express
Install it:
# install NestJS dependencies
$ npm install --save @nestjs/core @nestjs/common @nestjs/platform-express
# install @xxx-ssr/nestjs-express
$ npm install --save @xxx-ssr/nestjs-express react react-dom
And add a script to your package.json like this:
{
"scripts": {
"start": "ts-node --project tsconfig.server.json server/main.ts"
}
}
Populate files below inside your project:
./.babelrc
{
"presets": ["@xxx-ssr/nestjs-express/babel"]
}
./tsconfig.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
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
},
"include": ["server"]
}
./server/main.ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import register from '@xxx-ssr/nestjs-express/register';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(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
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
@Module({
controllers: [AppController]
})
export class AppModule {}
./server/app.controller.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
interface IndexProps {
user: any;
}
const Index = ({ user }: IndexProps) => {
return <p>Hello {user.name}!</p>;
};
export default Index;
Then just run npm start
and go to http://localhost:3000
, you'll see Hello NestJS!
.