Easy SSR (server side rendering) with react

Ever wanted to implement easy server side rendering with react. React SSR is made easy by react-snapshot. SSR with react-snapshot

 

Code example to fetch todos from open source api and render in your react app

 

import React, { useState, useEffect } from 'react';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [action, setAction] = useState(false);

  const fetchTodosFromServer = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todos = await response.json();
    setTodos(prevState => [...prevState, ...todos]);
  };

  useEffect(() => {
    fetchTodosFromServer();
  }, [action]);

  return (
    <div>
      <button onClick={() => setAction(!action)}>Refetch todos</button>
      <hr />
      <p>Total todos: {todos.length}</p>
      <hr />
      {todos.map(todo => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
};

export default App;

 

Install react-snapshot

npm i react-snapshot

 

Update your package.json build script

"build": "react-scripts build && react-snapshot"

 

Use react-snapshot's render method instead of ReactDom.render in your index.js

import { render } from 'react-snapshot';
 
 render(
    <App/>,
    document.getElementById('root')
  );

 

Then run npm run build

Run react production build locally

To run production build locally, you should install a package called serve globally by running the following command npm i -g serve

Now run your react app from within your project directory

serve -s build

No open your page and right click to see view page source. You have entire html markup of your page instead of just a div with id of root.

---

---