Routing with WasmEdge SSR vs regular SSR

[tpmccallum]

It would be great to take a look at how WasmEdge SSR can implement routing.

The standard way to route in React is to install the npm install react-router-dom package and then implement in the App.js file, as shown below.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

Below is the full App.js file which uses routing and this is where the page on the client's browser stops responding (when using WasmEdge SSR)

import React from 'react';
import Navbar from './Navbar';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

This is the client's browser when running routing via WasmEdge (FYI there seems to be no messages in the terminal where the wasmedge command is run and also no messages in the browser's console)

---

If the same source is run using regular SSR via the npm start command, the page renders correctly at localhost:3000 in the client's browser and no messages or errors etc. are present.

[DarumaDocker]

function App() {
  return (
   <div>
123
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
</div>
  );
}

@tpmccallum You can wrap the <Router> with a <div> and add some text to it. Then you will find that when running using npm start, the source code of the page will not include the 123. It means npm start is not rendering the page on the server-side.

If you want to test SSR within NodeJs, you should write another server, please refer to https://www.digitalocean.com/community/tutorials/react-server-side-rendering