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