SSR-React,Redux and React Router-Initial data for page load

help
1

Hi All,

I have just started up with Redux in my app for SSR and have got it work just fine. I have a questions on initial data provided to page load may be hampering my app load performance, it would be really helpful if you could help me with loading only limited data on landing.

Below is my code

Server

onPageLoad((sink) => {
  const context = {};
  const initial = quizGetAll.call({}); //this query loads all the data and send it to client via redux
  const store = createStore(mainReducer, { quiz: initial }, applyMiddleware(thunk));

  const App = props => (
    <Provider store={store}>
      <StaticRouter location={props.location} context={context}>
        {Routes}
      </StaticRouter>
    </Provider>
  );

  App.propTypes = {
    location: object.isRequired,
  };

  const preloadedState = store.getState();

  sink.renderIntoElementById('app', renderToString(<App location={sink.request.url} />));

  const helmet = Helmet.renderStatic();
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.title.toString());

  sink.appendToBody(`
    <script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
    </script>
  `);
});

Client

const preloadedState = window.__PRELOADED_STATE__; //This is loading all the data of my app into client

delete window.__PRELOADED_STATE__;

const store = createStore(mainReducer, preloadedState, applyMiddleware(thunk));
const App = () => (
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        {Routes}
      </Switch>
    </BrowserRouter>
  </Provider>
);
//Render Routes to client with a delay of 2s to allow server to render first
onPageLoad(() => {
  ReactDOM.hydrate(<App />, document.getElementById('app'));
});

Please guide me in loading only 20 records per page(planning to do pagination) that way i think the page performance will improve.

TIA

1 Like
2

Wouldn’t you just limit how many documents you’re returning in this call?

3

I was thinking of doing the same, but was little worried about loading the data for all other pages(paginated).

As Redux is new thing that i am exploring i would request you to help me if the below questions.

  1. As i will be loading initial with 20 documents, rest n numbers of documents are still accessible to client/server?
  2. One of my route will have only one document so if an end user goes to the link directly will he/she be able to load only that document instead of all others.

TIA