Express용 React View 템플릿 엔진

17101 단어 typescriptjavascriptexpressreact

TLDR


  • React 클라이언트에 서버 데이터 전달props
  • 보기 템플릿 엔진이므로 Google과 같은 검색 엔진에서 결과를 검색할 수 있습니다(예, 서버측 렌더링 사용)



    • 짭짤한 / 반응-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

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

    …
    View on GitHub

    빠른 시작

    설치

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


    package.json 채우기




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


    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(props) {
  return `Hello ${props.user.name}!`;
}


    서버 실행




    $ npm start


    당신은 볼 수 있습니다 Hello World!

    깊이 파고들다



    1. jsx 및 tsx 등록



    출처: register.ts

    const ENGINE: 'jsx' | 'tsx' = getEngine();
app.engine(ENGINE, renderFile);
app.set('views', resolve(process.cwd(), viewsDir));
app.set('view engine', ENGINE);
app.use(express.static(distDir));


    2. 파일 렌더링(서버 측 렌더링)



    출처: render.tsx

    import { renderToString } from 'react-dom/server';

let html: string = '<!DOCTYPE html>';

let Page = require(file); // `file` is a React function component
Page = Page.default || Page;

html += renderToString(
  <Html script={`${hash}.js`}>
    <Page {...props} />
  </Html>
);

return html;


    3. 스크립트 번들 및 출력 쓰기



    출처: render.tsx

    import fs from 'fs';
import template from 'art-template';
import webpack from 'webpack';

const { ufs } = require('unionfs');
const MemoryFileSystem = require('memory-fs');
const template = require('art-template');

const cwd: string = process.cwd();

template.defaults.minimize = false;

const mfs = new MemoryFileSystem;
ufs.use(mfs).use(fs); // union memory-fs and fs!

// write file in the server memory
mfs.mkdirpSync(resolve(cwd, 'react-ssr-src'));
mfs.writeFileSync(resolve(cwd, `react-ssr-src/entry.jsx`), template(resolve(__dirname, '../page.jsx'), { props }));
mfs.writeFileSync(resolve(cwd, `react-ssr-src/page.jsx`), template(file, props));

// compile in the server memory!
const compiler: webpack.Compiler = webpack(configure(hash, ext, distDir));
compiler.inputFileSystem = ufs;
compiler.outputFileSystem = mfs;
compiler.run((err: any) => {
  if (err) {
    console.error(err.stack || err);
    if (err.details) {
      console.error(err.details);
    }
    return;
  }
});

// read the results from memory file system
// write the results to the real file system
await outputFileSync('result.js', mfs.readFileSync(cache).toString());


    그게 다야!

    최종 출력 html은 다음과 같습니다.

    <!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <p>Hello World!</p>
    </div>
    <script src="/c834ab9b47260a08d695f59ba1a5b24d.js"></script>
  </body>
</html>


    종결



    그러나 나는 NEXT.js을 사용하는 것을 좋아합니다! ㅋㅋㅋ
    EC2에 자동 테스트, 배포를 CircleCI로 실현 (Django)
    Circle Ci에서 파이썬 unittest를 실행합니다. pyramid 프로젝트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage