@xxx-ssr/core

😎 @xxx-ssr/core 😎

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!.