lyuji282/react-ssr

React SSR as a view template engine

😎 React SSR 😎

React SSR as a view template engine

How to use

Install it:

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

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

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

Populate below files inside your project:

./server.js

const express = require('@react-ssr/express');
const app = express();

app.get('/', (req, res) => {
  const user = { name: 'World' };
  res.render('index', { user });
});

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

./views/index.jsx

import React from 'react';

export default function Index({ user }) {
  return `Hello ${user.name}!`;
}

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

You'll see Hello World!.

Features

• Pass server data to the client props
• Auto SSR (Server Side Rendering)
• TypeScript support

Configuration

const express = require('@react-ssr/express');

// default configuration
const app = express({
  distDir: 'dist',
  viewsDir: 'views',
});

TypeScript Support

To enable TypeScript .tsx, just put tsconfig.json in your project root directory.

And TypeScript codes should be like these:

./package.json

{
  "scripts": {
    "start": "ts-node server.ts"
  }
}

./server.ts

import express from '@react-ssr/express';
import { Request, Response } from 'express';

const app = express();

app.get('/', (_req: Request, res: Response) => {
  const user = { name: 'World' };
  res.render('index', { user });
});

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

./views/index.tsx

import React from 'react';

interface IndexProps {
  user: any;
}

export default function Index({ user }: IndexProps) {
  return `Hello ${user.name}!`;
}

Packages

package	version
@react-ssr/express

Examples

See the examples folder.

Roadmaps

• README
  • Roadmaps
  • How to use
  • Contributing guides
• develop packages
  • lerna monorepo development
  • @react-ssr/express
    • .jsx support
    • .tsx support
  • @react-ssr/fastify
  • @react-ssr/nest

Develop examples/<example-folder-name>

$ git clone https://github.com/saltyshiomix/react-ssr.git
$ cd react-ssr
$ yarn
$ yarn dev <example-folder-name>

Articles

The React View Template Engine for Express