joje/server.tsx at main · study-react-from-scratch-hoco/joje · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import express from 'express';
import React from 'react';
import { renderToPipeableStream } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './src/app';
import { readFileSync } from 'fs';
import path from 'path';

const app = express();
const templateHTML = `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React SSR</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
`;

// 정적 파일 제공
app.use(express.static(path.join(__dirname, 'dist')));

// 1. 클라이언트가 요청을 보내면
app.get('/*', (req, res) => {
  res.socket?.on('error', error => {
    console.error('Fatal', error);
  });

  let didError = false;

  const stream = renderToPipeableStream(
    <React.StrictMode>
      <StaticRouter location={req.url}>
        <App />
      </StaticRouter>
    </React.StrictMode>,
    {
      bootstrapScripts: ['/client.js'],
      onShellReady() {
        res.statusCode = didError ? 500 : 200;
        res.setHeader('Content-type', 'text/html');
        res.write('<!DOCTYPE html><html><head><title>React SSR</title>');
        res.write('</head><body><div id="root">');
        stream.pipe(res);
        res.write('</div><script src="/client.js"></script></body></html>');
      },
      onShellError(error: Error) {
        didError = true;
        console.error('Shell Error:', error);
        res.statusCode = 500;
        res.send('<!doctype html><h1>Error</h1><pre>' + error.stack + '</pre>');
      },
      onError(error: Error) {
        didError = true;
        console.error('Error:', error);
      },
    }
  );
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});