DEV Community

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,

Discussion

pic
Editor guide
Collapse
blueboy6 profile image
BlueBoy6

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 !

Collapse
saltyshiomix profile image
Shiono Yoshihide Author

Thank you for your fast trying it!

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

Collapse
blueboy6 profile image
BlueBoy6

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

Thread Thread
saltyshiomix profile image
Shiono Yoshihide Author

Sorry for the inconvenience.

I finally found that require.cache causes this bug.

I'll tackle the bugs later!

Thread Thread
saltyshiomix profile image
Shiono Yoshihide Author

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!

Thread Thread
saltyshiomix profile image
Shiono Yoshihide Author

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

Please check out updated example repository:

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

Collapse
saltyshiomix profile image
Shiono Yoshihide Author

Oh, you're right!!

Thank you pointing it out :)