Merge pull request #3 from divar-ir/add-ssr-sample

Add SSR sample

README.md

@@ -89,8 +89,9 @@ Only views can be SSR. Views are components that directly connected to a URL. To
 
 ```
 Component.propTypes = {
-   initialSSRData: PropTypes.shape({
-   posts: PropTypes.array(),
+  initialSSRData: PropTypes.shape({
+    posts: PropTypes.array(),
+  }),
 };
  
 export default Component;

src/views/Home/index.jsx

@@ -1,22 +1,43 @@
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import MetaTags from 'react-helmet';
 
 import logo from 'src/assets/logo.svg';
 
+import { getHomeTitle } from './requests';
+
 import './Home.scss';
 
-function Home() {
-  return (
-    <main className="container home">
-      <MetaTags title="divar-starter-kit 🚀" />
-      <img
-        className="home__logo"
-        src={logo}
-        alt="divar-stater-kit"
-      />
-      <p className="title">Running divar-starter-kit successfully.</p>
-    </main>
-  );
+class Home extends Component {
+  static serverSideInitial() {
+    const title = getHomeTitle();
+
+    return {
+      title,
+    };
+  }
+
+  render() {
+    const { initialSSRData: { title } } = this.props;
+
+    return (
+      <main className="container home">
+        <MetaTags title="divar-starter-kit 🚀" />
+        <img
+          className="home__logo"
+          src={logo}
+          alt="divar-stater-kit"
+        />
+        <p className="title">{title}</p>
+      </main>
+    );
+  }
 }
 
+Home.propTypes = {
+  initialSSRData: PropTypes.shape({
+    title: PropTypes.string,
+  }).isRequired,
+};
+
 export default Home;

src/views/Home/requests.js

@@ -0,0 +1,5 @@
+
+// eslint-disable-next-line import/prefer-default-export
+export function getHomeTitle() {
+  return 'Running divar-starter-kit successfully.';
+}