Closed1

vite + React SSR, Serverお試し。

knaka Tech-Blogknaka Tech-Blog

概要

vite + SSRメモになります。

  • viteの ssrページで、server実装的なサンプルを発見したので調べてみました

内容

  • fileベースのルーティング
  • React SSRできる
  • React CSRもできる
  • expressを採用している
  • apiも実装できる

環境

  • vite
  • express
  • React
  • node 20

関連


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と、呼び出し画面を追加した程度

https://github.com/kuc-arc-f/vite_ssr_react6

このスクラップは2023/10/04にクローズされました