๐ React SSR ๐
React SSR as a view template engine
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!
.
- Pass server data to the client
props
- Auto SSR (Server Side Rendering)
- TypeScript support
const express = require('@react-ssr/express');
// default configuration
const app = express({
distDir: 'dist',
viewsDir: 'views',
});
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}!`;
}
package | version |
---|---|
@react-ssr/express |
See the examples folder.
- 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
$ git clone https://github.com/saltyshiomix/react-ssr.git
$ cd react-ssr
$ yarn
$ yarn dev <example-folder-name>