Express에서 SSR React 를 View로 사용하기

1. 개요

나는 현재 Front end 로는 React , Back end 로는 Nodejs 를 사용하고 있다. Nodejs의 Express 로 페이지를 만들 경우, 선택할 수 있는 View 의 종류는 Pug, Ejs 와 같이 여러가지가 있다. 하지만 나는 기본적으로 프론트는 React를 쓰는 편이라서 Express로 작업을 할 때도 React를 사용하고 싶다.

여기서 한가지 문제가 생기는데,

React처럼 SPA ( Single page application ) 은 SEO 에서 잘 인식을 못하는 경우가 있다는 것이다. 요즘은 크롤러 들이 많이 발전을 해서 SPA페이지도 잘 인식한다는 말이 있지만, SPA에 Route 의 작업을 할 경우 인식률은 현저히 떨어진다고 한다.

그래서 생각하는것이 SSR ( Server Side Rendering ) 의 React를 사용하는 것이다.

2. Express 구성하기

2.1. 프로젝트 만들기

먼저 프로젝트를 생성한다.

$ yarn init

2.2. Express Module 설치

Express Module을 설치하고 메인 Server 파일을 만들어 주자.

$ yarn add express

$ touch ./server.js

2.3. Express Code

Express 기본 코드를 작성한다.

// ./server.js

const express = require('express')
const app = express()

const port = 3000

app.get('/', (req, res) => {
    res.send('test')
})

app.listen(port, () => console.log(`express started with port ${port}`))

$ node server.js

# => express started with port 3000

터미널에서 위의 명령어를 실행 시켜보면 잘 작동 되는것을 알 수 있다.

그럼 지금부터 위의 코드에 React를 View로 사용할 수 있게 하자.

3. SSR React 구성하기

3.1. Module 설치

먼저 필요한 모듈은 총 3가지 이다.

• express-react-views
• react
• react-dom

$ yarn add express-react-views react react-dom

3.2. Server.js 코드 수정

server.js 파일 내의 코드를 다음과 같이 수정해 준다.

const express = require('express')
const app = express()

const port = process.env.PORT || 3000

app.use(express.static('public'))

app.set('views', __dirname + '/views')
app.set('view engine', 'jsx')
app.engine('jsx', require('express-react-views').createEngine())


app.get('/', (req, res) => {
    res.render('index', { name: 'Rhapsodist' })
})

app.listen(port, () => console.log(`express started with port ${port}`))

차근차근 한줄 씩 보자.

• app.set('views', __dirname + '/views')
  • View가 들어갈 디렉토리를 지정해주는 부분이다.
• app.set('view engine', 'jsx')
  • View engine 을 JSX 로 지정해주는 부분이다.
• app.engine('jsx', require('express-react-views').createEngine())
  • 조금전 설치 했던 express-react-views로 부터 Engine 을 생성하는 부분이다.
• res.render('index', { name: 'Rhapsodist' })
  • 이름이 index 인 View를 열고 name props를 넘겨줄 수 있다.

3.3. View 구성하기

앞으로는 View를 생성해 주기만 하면된다.

먼저 파일을 생성하자

$ mkdir ./views

$ touch ./views/index.jsx

그 후 안에 index.jsx 파일에 React를 구성하면 된다.

import React, { Component } from 'react'

export default class IndexPage extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        const {name} = this.props
        return (
              <div>hello {name}</div>
        )
    }
}

Props 로 서버 쪽에서 전달 받은 name 의 값을 받아 표시해준다.

4. 결론

Express 에서 SSR React를 사용 하는 방법은 여러가지가 있다. 그 중에서 Next.js 는 대표적인 Express, SSR React를 사용한 프레임워크 이다. 어느 쪽이든 편한 쪽을 선택하면 될것 같다.

참고로, SSR React는 기존의 React보다는 역시 여러가지 제약이 존재한다.

처음 랜더링 되는 부분에서는 DOM 처리 코드를 사용할 수 없다던가, Front end 계열의 Module을 다른 방식으로 처리해 주어야 하는 불편함은 존재한다.