[Express] 뷰 템플릿 엔진으로 반응하시겠습니까?

업데이트됨(2019년 10월 29일)

친절한 조언자 덕분에 많은 버그가 수정되고 새로운 기능이 추가되었습니다.

v0.2.6 - [수정] 캐시 문제

v0.3.0 - [신규] 핫 리로딩 지원process.env.NODE_ENV !== production

v0.3.1 - [수정] 많은 버그

v0.4.2 - [신규] emotion 지원

v0.5.5 - [신규] material-ui 지원

v0.5.6 - [신규] styled-components 지원

v0.6.1 - [신규] NestJS 지원

v0.7.0 - [신품] ssr.config.js

v0.8.0 - [신품] dynamic Head

소개

React를 뷰 템플릿 엔진으로 사용하는 것에 대해 생각해 본 적이 있습니까?

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

이것을 상상해보십시오!

패키지.json

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

서버.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');
});

조회수/index.jsx

import React from 'react';

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

멋지지 않나요?

그것을 배우고 사용하기에 충분히 간단합니다.

이것을 시도하십시오! 그리고 당신의 첫인상을 말해주세요!

# 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`)

짭짤한 / 반응-ssr-jsx-스타터

@react-ssr/express의 예시

이 저장소는 @react-ssr/express 의 예입니다.

용법

# 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`)

관련된

saltyshiomix/react-ssr - SSR을 보기 템플릿 엔진으로 반응


View on GitHub

@react-ssr/express 정보

짭짤한 / 반응-ssr

SSR을 보기 템플릿 엔진으로 반응

개요

뷰 템플릿 엔진으로서의 SSR(Server Side Rendering)

다이나믹 props

React 클라이언트에 서버 데이터 전달props

에 적합

관리자 패널

블로깅

개발자 경험

webpack 및 babel의 제로 구성

HMR(Hot Module Replacement) 스크립트와 if 스타일이 있을 때process.env.NODE_ENV !== 'production'

내장 Sass(SCSS) 지원

장점과 단점

장점

보기 템플릿 엔진일 뿐이기 때문입니다.

API가 필요하지 않으며 서버 데이터를 클라이언트에 전달하기만 하면 됩니다

.

.hbs, .ejs 및 React.(ts|js)x와 같은 여러 엔진을 지원합니다.

passport 인증을 항상 그대로 사용할 수 있습니다

.

단점

각 요청에서 전체 HTML을 어셈블하기 때문에 성능이 좋지 않습니다

.

클라이언트 측 라우팅을 지원하지 않습니다.

용법

@react-ssr/express 사용

그것을 설치하십시오:

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

다음과 같이 package.json에 스크립트를 추가합니다.
…


View on GitHub

결론

May the code be with you.

모두 감사합니다!!!

에게,