Parcel은 간단하고 빠른 웹 애플리케이션 번들러이며, 서버 사이드 렌더링(SSR)을 구현하는 방법에 대해 알아보겠습니다.

1. Express.js를 사용하여 서버 설정

Parcel로 번들링된 앱을 실행하기 위해 Express.js를 사용할 것입니다. Express.js를 설치하고, 서버 설정을 시작해보겠습니다.

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist/index.html'));
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

위의 예제에서는 Express.js를 사용하여 정적 파일을 제공하고, 모든 요청을 dist/index.html 파일로 보냅니다. 이렇게하면 클라이언트 측에서 서버 사이드 렌더링 된 페이지를 제공 할 수 있습니다.

2. 서버 측 렌더링 준비

Parcel을 사용하여 서버 측에서 JavaScript 모듈을 렌더링하려면 parcel-plugin-ssr 플러그인을 설치해야합니다.

플러그인을 설치하기 위해 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다.

$ npm install parcel-plugin-ssr --save-dev

플러그인을 설치 한 후, package.json 파일에 다음과 같은 스크립트를 추가합니다.

"scripts": {
  "start": "parcel src/index.html --target node --port 3001",
  "build": "parcel build src/index.html --target node"
}

이제 Server Entry 파일을 작성해야합니다. 이 파일은 서버에서 실행되며, SSR에 필요한 초기 렌더링 작업을 수행합니다.

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

export default function render(url) {
  const html = renderToString(<App />);
  return html;
}

3. 클라이언트 측 코드 업데이트

서버 측에서 렌더링 된 HTML을 클라이언트에 전달하기 위해 Parcel 번들러가 필요합니다. 따라서 클라이언트 측 코드에 몇 가지 변경 사항이 필요합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

ReactDOM.render 대신 ReactDOM.hydrate를 사용하여 클라이언트 측에서 렌더링 된 React 앱을 초기화합니다.

4. 서버 실행

이제 다음 명령을 통해 서버를 실행할 수 있습니다.

$ npm run start

서버가 실행되면 Parce 번들러가 dist/index.html 파일을 렌더링하고, 서버 측에서 초기 렌더링을 수행합니다. 클라이언트에서는 서버 측에서 렌더링 된 HTML을 가져와서 마운트합니다.

이렇게하면 Parcel에서 서버 사이드 렌더링(SSR)을 구현 할 수 있습니다. SSR을 통해 앱의 초기 로딩 속도를 향상시키고 SEO에 더 유리한 페이지를 제공할 수 있습니다.