diff --git a/examples/ssr-caching/pages/blog.js b/examples/ssr-caching/pages/blog.js
deleted file mode 100644
index f70cd07a6316662..000000000000000
--- a/examples/ssr-caching/pages/blog.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-export default class extends React.Component {
-  static getInitialProps({ query: { id } }) {
-    return { id }
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>My {this.props.id} blog post</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    )
-  }
-}
diff --git a/examples/ssr-caching/pages/blog/[id].js b/examples/ssr-caching/pages/blog/[id].js
new file mode 100644
index 000000000000000..44606a200e1304d
--- /dev/null
+++ b/examples/ssr-caching/pages/blog/[id].js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+export default function(props) {
+  return (
+    <div>
+      <h1>My {props.id} blog post</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  )
+}
+
+export async function getStaticProps({ params: { id } }) {
+  return { props: { id } }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      { params: { id: 'first' } },
+      { params: { id: 'second' } },
+      { params: { id: 'last' } },
+    ],
+    fallback: true,
+  }
+}