loading...
Cover image for [Express] React as a View Template Engine?

[Express] React as a View Template Engine?

saltyshiomix profile image Shiono Yoshihide Updated on ・2 min read

Updated (2019/10/29)

Thanks to kind advisors, lots of bugs are fixed and new features are added:

  • v0.2.6 - [fix] the cache problem
  • v0.3.0 - [new] support for hot reloading when process.env.NODE_ENV !== production
  • v0.3.1 - [fix] lots of bugs
  • v0.4.2 - [new] support for emotion
  • v0.5.5 - [new] support for material-ui
  • v0.5.6 - [new] support for styled-components
  • v0.6.1 - [new] support for NestJS
  • v0.7.0 - [new] ssr.config.js
  • v0.8.0 - [new] dynamic Head

Intro

Have you ever thought about using React as a view template engine?

If I could use React as a real view, a view template engine of Express.

But it may be difficult because React is a component oriented library, and it must be bundled by webpack or rollup and so on...

Imagine This!

package.json

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

server.js

const app = express();

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

import React from 'react';

export default function Index({ message }) {
  return <p>{message}</p>;
}

It's wonderful, isn't it?

Simple enough to learn and use it.

Please Try This! And Tell Me Your First Impression!

# installation
$ git clone https://github.com/saltyshiomix/react-ssr-starter.git
$ cd react-ssr-starter
$ yarn (or `npm install`)

# development mode
$ yarn dev (or `npm run dev`)

# production mode
$ yarn start (or `npm start`)

GitHub logo saltyshiomix / react-ssr-jsx-starter

An example of @react-ssr/express

This repository is the example of @react-ssr/express.

Usage

# installation
$ git clone https://github.com/saltyshiomix/react-ssr-jsx-starter.git
$ cd react-ssr-jsx-starter
$ yarn (or `npm install`)

# development mode
$ yarn dev (or `npm run dev`)

# production mode
$ yarn start (or `npm start`)

Related

saltyshiomix/react-ssr - React SSR as a view template engine

About @react-ssr/express

GitHub logo saltyshiomix / react-ssr

React SSR as a view template engine

Overview

  • SSR (Server Side Rendering) as a view template engine
  • Dynamic props
    • Passing the server data to the React client props
    • Suitable for
      • Admin Panels
      • Blogging
  • Developer Experience
    • Zero config of webpack and babel
    • HMR (Hot Module Replacement) both scripts and even if styles when process.env.NODE_ENV !== 'production'
    • Built-in Sass (SCSS) support

Pros and Cons

Pros

Because it is just a view template engine:

  • It doesn't need to have any APIs, all we have to do is to pass the server data to the client
  • It supports multiple engines like .hbs, .ejs and React .(ts|js)x
  • We can use passport authentication as it always is

Cons

  • It is not so performant, because it assembles the whole HTML on each request
  • It does not support client side routing

Usage

With @react-ssr/express

Install it:

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

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

Conclusion

May the code be with you.

Thank you for all!!!

Dear,

Posted on by:

Discussion

markdown guide
 

Great one !
however in my last tries i found some bugs.
I installed nodemon and when i modify the jsx component, the changes doesn't appear. I tried to restart the server, switch the command to node back, but nothing worked.. the only way to change something on my screen was to create a new jsx and use him in server.js.
Do you have an idea of this bug ?

Thank you !

 

Thank you for your fast trying it!

I fixed the bug @react-ssr/express@0.2.4 and updated the example repo :)

 

hi ! It still don't work and i don't find what is working bad.. i also tried to introduce component inside of main component but he can't find module..

Sorry for the inconvenience.

I finally found that require.cache causes this bug.

I'll tackle the bugs later!

Fixed @react-ssr/express@0.2.6 :)

Thank you in advance!

I'll add the feature of HMR (hot module replacement) for the better developer exprerience!

Added the hot reloading feature as of @react-ssr/express@0.3.0!

Please check out updated example repository:

github.com/saltyshiomix/react-ssr-...

 

"React as a View Template Engine?"

React is literally a view "engine", it's all about that: handling the views and their state and/or props. :P

 

Oh, you're right!!

Thank you pointing it out :)