simple server/client routing react-express(nodejs)

Question

App.js has a link to - I am not understanding if I need action creators/reducers? if so how to wire it up with server side rendering?

Basically on load of otherComponent - should make an API call from server.js by path and inject response back to the component - where does react actions fit in this picture?

server.js:

app.get('/test', (req, res) => {
    res.send(<otherComponent />); -> this is returning json right now? How to handle this path for example here - where this should make an api call.
});

app.get('*', (req, res) => {
  res.send(`
            <!doctype html>
            <html>
                <head>
                    <title>My website</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
            </head>
                <body>
                    <div id='app'>${renderToString(
                        <Provider store={createStore(reducers)}>
                            <StaticRouter location={req.url} context={{}}>
                                <App />
                            </StaticRouter>
                        </Provider>
                    )}</div>
                    <script src='bundle.js'></script>

                </body>
            </html>
        `);
});

score 0 · Answer 1 · answered Sep 15 '17 at 19:09

In your React component, just fire the API calls you need

componentDidMount() {
    $.get('/test', data => {
        // use data
    });
}

Typically with an SPA, you'd serve the full client app from the server on the first request, use client-side routing for your views and then fire any API requests (like the example).

Greg Artemides · Answer 2 · 2017-09-15T20:46:05.297

Update: I think you may find this tutorial helpful: https://medium.com/@foxhound87/server-side-rendering-with-react-router-we-must-react-ep-04-ad03b6b9e05d

Use create-react-app to create your app. Do yarn add react-router-dom to add React's router. More info on this here: https://reacttraining.com/react-router/web/guides/quick-start.

Put <Router /> around the App JSX.
Use the <Link /> to create links to <Route />. When the path in Link matches, the correct Route renders.
Note also the requests in componentDidMount.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/test">Test</Link>
          </nav>
          <Route path="/" exact component={Index} />
          <Route path="/test" exact component={Test} />
        </div>
      </Router>
    );
  }
}

class Index extends Component {
  onComponentDidMount() {
    fetch('http://yourapi.com')
      .then(data => this.setState(data));
  }
  render() {
    return (
      <div>
        <h1>Index Component</h1>
        <div>{ /* do something with this.state.data */}</div>
      </div>
    );
  }
}

class Test extends Component {
  onComponentDidMount() {
    fetch('http://yourapi.com')
      .then(data => this.setState(data));
  }
  render() {
    return (
      <div>
        <h1>Test Component</h1>
        <div>{ /* do something with this.state.data */}</div>
      </div>
    );
  }
}

export default App;

@https://stackoverflow.com/users/2885592/greg-artemides - this is for server side rendering...sorry if my question was not clear. — monkeyjs, Sep 15 '17 at 20:00
Just to make sure I understand correctly - you have an api built on Express, and your client app is React, and you want to render React on the server before serving it? — Greg Artemides, Sep 15 '17 at 20:12
Yes I have api end points which I should call from Node(Express) and render the response on server and populate react components. — monkeyjs, Sep 15 '17 at 20:19
My main question is I have 2 routes - 2 endpoints - how do I do app.get in server.js match the routes and make an appropriate api call? I read about rendertostring - redux server side rendering should I do that per api call? on load of each component? — monkeyjs, Sep 15 '17 at 20:21
Can you post some code? It would be helpful to see the Express app.get (the api) and the React routes (the client that is rendered on the server). — Greg Artemides, Sep 15 '17 at 20:43
Your terminology is confusing (hence why my answer is more related to client-side API calls). As suggested you should look at NextJS - this is designed to do server-side rendering which supports prepopulation of React component data. — James, Sep 15 '17 at 22:20

score 0 · Answer 3 · answered Sep 16 '17 at 10:16

0

In the definition of <otherComponent \>, fetch the data in componentDidMount(), then do store.dispatch({ type: 'RECEIVED_DATA', data }) to update the store.

answered Sep 16 '17 at 10:16

Greg Artemides

15
4

simple server/client routing react-express(nodejs)

3 Answers3