Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 763caca

Browse files
update app
1 parent 66270b3 commit 763caca

File tree

3 files changed

+38
-25
lines changed

3 files changed

+38
-25
lines changed

‎functions/react-app/App.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import React,{Fragment} from "react";
1+
import React from "react"
22

33
const App = (props) => {
4+
const list = props.data.map((user) => {
5+
return (
6+
<li>{user.name}</li>
7+
)
8+
})
9+
410
return (
5-
<div>React!</div>
11+
<div>
12+
<h1 onClick={() => { console.log('hi') }}>
13+
This is SSR React!
14+
</h1>
15+
{list}
16+
</div>
617
)
718
}
819

9-
export default App;
20+
export default App

‎functions/react-app/usersData.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React from 'react';
2-
import fetch from 'isomorphic-fetch';
1+
import fetch from 'isomorphic-fetch'
32

43
export default function Data() {
54
return fetch('https://jsonplaceholder.typicode.com/users').then(data => data.json())
6-
}
5+
}

‎functions/react-ssr.js

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,32 @@ app.use(bodyParser.json())
1717
app.use(bodyParser.urlencoded({ extended: false }))
1818
// app.use(express.static(path.resolve(__dirname, "./Browser")))
1919

20-
21-
const markup = `<!DOCTYPE html>
22-
<html lang="en">
23-
<head>
24-
<meta charset="UTF-8">
25-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
26-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
27-
<title>SSR- React</title>
28-
<link rel="stylesheet" href="/dev/bundle.css">
29-
</head>
30-
<body>
31-
<div id="root"><!--App--></div>
32-
33-
<script src="/dev/bundle.js"></script>
34-
</body>
35-
</html>`
36-
20+
const Html = ({ body, styles, title }) => {
21+
const stylesheet = (styles) ? `<style>${styles}</style>` : ''
22+
return `
23+
<!DOCTYPE html>
24+
<html>
25+
<head>
26+
<title>${title}</title>
27+
${stylesheet}
28+
</head>
29+
<body style="margin:0">
30+
<div id="root">${body}</div>
31+
<script src="/dev/bundle.js"></script>
32+
</body>
33+
</html>
34+
`
35+
}
3736
const routerBasePath = (process.env.NODE_ENV === 'dev') ? `/${functionName}` : `/.netlify/functions/${functionName}/`
3837

3938
app.get(routerBasePath, (req, res) => {
4039
Data().then(users => {
41-
const html = renderToString(<App data={users} />)
42-
res.send(markup.replace("<!--App-->", html))
40+
const reactAppHtml = renderToString(<App data={users} />)
41+
const html = Html({
42+
title: 'React SSR!',
43+
body: reactAppHtml
44+
})
45+
res.send(html)
4346
})
4447
})
4548

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /