DEV Community

Cover image for [Express] React as a View Template Engine?
Shiono Yoshihide
Shiono Yoshihide

Posted on • Edited on

[Express] React as a View Template Engine?

#react #javascript #express #challenge

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

views/index.jsx 

import React from 'react';

export default function Index({ message }) {
  return <p>{message}</p>;
}
Enter fullscreen mode Exit fullscreen mode

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`)
Enter fullscreen mode Exit fullscreen mode

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`)
Enter fullscreen mode Exit fullscreen mode

Related

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




View on GitHub


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
Enter fullscreen mode Exit fullscreen mode

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

…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Conclusion

May the code be with you.

Thank you for all!!!

Dear,

Top comments (8)

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 !

OSZAR »
Collapse
 
saltyshiomix profile image
Shiono Yoshihide •

Thank you for your fast trying it!

I fixed the bug @react-ssr/[email protected] and updated the example repo :)

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

OSZAR »
Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide •

Sorry for the inconvenience.

I finally found that require.cache causes this bug.

I'll tackle the bugs later!

OSZAR »
Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide •

Fixed @react-ssr/[email protected] :)

Thank you in advance!

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

OSZAR »
Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide •

Added the hot reloading feature as of @react-ssr/[email protected]!

Please check out updated example repository:

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

OSZAR »
Collapse
 
sagarbetkar profile image
Sagar Betkar • • Edited

Great Work!
I am using your @saltyshiomix / react-ssr-jsx-starter repo. I am trying to load images on my react pages but unable to do. Please help me with this. It would be a great help if you add it to your repo @saltyshiomix / react-ssr-jsx-starter .
Thank you.

Collapse
 
saltyshiomix profile image
Shiono Yoshihide •

Oh, you're right!!

Thank you pointing it out :)

OSZAR »
OSZAR »