with-apollo SSR example added. (#21956)

Co-authored-by: Lee Robinson <[email protected]>

examples/with-apollo/components/Header.js

@@ -17,6 +17,9 @@ export default function Header() {
           Client-Only
         </a>
       </Link>
+      <Link href="/ssr">
+        <a className={pathname === '/ssr' ? 'is-active' : ''}>SSR</a>
+      </Link>
       <style jsx>{`
         header {
           margin-bottom: 25px;

examples/with-apollo/pages/ssr.js

@@ -0,0 +1,33 @@
+import App from '../components/App'
+import InfoBox from '../components/InfoBox'
+import Header from '../components/Header'
+import Submit from '../components/Submit'
+import PostList, {
+  ALL_POSTS_QUERY,
+  allPostsQueryVars,
+} from '../components/PostList'
+import { initializeApollo, addApolloState } from '../lib/apolloClient'
+
+const SSRPage = () => (
+  <App>
+    <Header />
+    <InfoBox>ℹ️ This page shows how to use SSR with Apollo.</InfoBox>
+    <Submit />
+    <PostList />
+  </App>
+)
+
+export async function getServerSideProps() {
+  const apolloClient = initializeApollo()
+
+  await apolloClient.query({
+    query: ALL_POSTS_QUERY,
+    variables: allPostsQueryVars,
+  })
+
+  return addApolloState(apolloClient, {
+    props: {},
+  })
+}
+
+export default SSRPage