Estoy implementando la representación del lado del servidor en una aplicación SPA de reacción y redux . Entonces, para SSR, busco datos en el servidor y creo una página usando el método renderToString y luego, en el lado del cliente, busco datos en useEffect como se muestra en el siguiente ejemplo.

Ahora el problema es que después de obtener datos en el servidor, el cliente vuelve a llamar a fetchRequestQuery(dispatch) en useEffect. entonces está llamando a la misma API 2 veces, lo cual es incorrecto. No puedo eliminar useEffect ya que cuando navego por la página (reacciona el enlace del enrutador), los datos deben buscarse en el lado del cliente solo para SPA.

Entonces, ¿cómo podría deshabilitar la llamada API en useEffect en el lado del cliente cuando abro la página por primera vez, pero cuando navegamos por la página, debería funcionar normalmente y hacer una llamada API en useEffect?

 import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { fetchRequestQuery } from '../actions'; const loadData = dispatch => ( fetchRequestQuery(dispatch) ); const Content = () => { const dispatch = useDispatch(); useEffect(() => { loadData(dispatch); }, []); const { request } = useSelector(state => state); return ( <span>{JSON.stringify(request)}</span> ); }; export default { component: Content, loadData, };

 import { matchRoutes } from 'react-router-config'; import Routes from './Routes'; import renderer from './helpers/renderer'; import createStore from './store'; const app = express(); app.use(express.static('dist')); app.get('*', (req, res) => { const store = createStore(); const { dispatch } = store; const routes = matchRoutes(Routes, req.path); const promises = routes.map( ({ route }) => (route.loadData ? route.loadData(dispatch) : null), ); Promise.all(promises).then(() => { const content = renderer(req, store); res.send(content); }); }); const port = process.env.PORT || 3001; app.listen(port, () => { console.log(`Listening on port: ${port}`); });