My Story: How I Learnt Server Side Rendering with React, Redux, Routing and Apollo Client

What is Server Side Rendering ?

Difference between Client Side Rendering and Server Side Rendering

Understanding the difference in CSR and SSR

Client Side Rendering

Server Side Rendering

A Simple Example of SSR with Redux Store

1. server.js

import React from 'react';
import Express from 'express';
import ReactDOMServer from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './App';

const app = new Express();

app.use((req, res) => {
 const initialStore = {
  isFetching: false,
  apps: {},
 }; // configure store
 const store = configureStore(initialStore);
 const preloadedState = store.getState();

 const appTree = (
   <Provider store={store}>
     <App />
   </Provider>
 );

 const content = ReactDOMServer.renderToString(appTree);

 res.write(`
   <!doctype html>
   <html>
     <body>
       <div id="app">${content}</div>
       <script>
         window.__data=${JSON.stringify(preloadedState)};
       </script>
     </body>
   </html>
   `);
 res.end();
});

2. client.js

import React from 'react'
import {hydrate} from 'react-dom'
import {Provider} from 'react-redux'
import configureStore from './redux/configureStore'
import App from './components/app';const state = window.__data__;
delete window.__data__;
const store = configureStore(state)hydrate(
  <Provider store={store} >
     <App />
  </Provider>,
  document.querySelector('#app')
)

Routing with SSR

import { StaticRouter } from 'react-router';
const context = {};
<StaticRouter
  location={req.url}
  context={context}
>
  <App/>
</StaticRouter>
// example to check a 301 redirect
if (context.url) {
     res.writeHead(301, {
       Location: context.url,
     });
     res.end();
   }

SSR with Apollo Client

const client = new ApolloClient({
    ssrMode: true,
    link: createHttpLink({
      uri: 'http://localhost:3010',
      credentials: 'same-origin',
      headers: {
        cookie: req.header('Cookie'),
      },
    }),
    cache: new InMemoryCache(),
  });const App = (
    <ApolloProvider client={client}>
      <StaticRouter location={req.url} context={context}>
        <Layout />
      </StaticRouter>
    </ApolloProvider>
  );

getDataFromTree()

import { getDataFromTree } from "react-apollo"

const client = new ApolloClient(....);


getDataFromTree(App).then(() => {
  // We are ready to render for real
  const content = ReactDOM.renderToString(App);
  const initialState = client.extract();

  const html = <Html content={content} state={initialState} />;

  res.status(200);
  res.send(`<!doctype html>\n${ReactDOM.renderToString(html)}`);
  res.end();
});

When should we use SSR ?

Pros of using SSR

Cons of using SSR

Conclusion

Further Reading

Tokopedia Engineering

Story from people who build Tokopedia

Deeksha Agarwal

Written by

Software Engineer at Tokopedia India

Tokopedia Engineering

Story from people who build Tokopedia