Closed1
vite + React SSR, Serverお試し。
概要
vite + SSRメモになります。
- viteの ssrページで、server実装的なサンプルを発見したので調べてみました
内容
- fileベースのルーティング
- React SSRできる
- React CSRもできる
- expressを採用している
- apiも実装できる
環境
- vite
- express
- React
- node 20
関連
-
ssrの関連git
-
playground/ssr-react を、試しました。
api の追加例
server.js
//
app.use('/api/*', async (req, res) => {
const url = req.originalUrl
console.log("ApiUrl=", url);
//
if(url === "/api/test") {
return res.json({msg: "hello, /api/test"});
}
return res.json({msg: "#api"});
});
- src/pages/Test.tsx
Test.tsx
import * as React from 'react';
import { addAndMultiply } from '../add'
import { multiplyAndAdd } from '../multiply'
let apiData: string = "";
//
export default function Test() {
const [updatetime, setUpdatetime] = React.useState("");
const msg: string = "Test";
//
const updateTimestap = function() {
const dt = new Date().toString();
setUpdatetime(dt);
}
const test = async function(){
const res = await fetch("/api/test");
const d = await res.json();
apiData = d.msg;
updateTimestap();
console.log(d);
};
//
return (
<>
<h1>Test</h1>
<p>apiData=[ {apiData} ]</p>
<hr />
<div>{addAndMultiply(1, 2, 3)}</div>
<div>{multiplyAndAdd(1, 2, 3)}</div>
<hr />
<button onClick={()=>{test()}}>Test</button>
</>
)
}
- button おすと、内部apiから、JSON response受信して、レンダリングする
修正したコード
- apiと、呼び出し画面を追加した程度
このスクラップは2023/10/04にクローズされました