SSR embeds

now.json

@@ -18,7 +18,6 @@
         "Location": "https://www.notion.so/TERMS-OF-USE-ff2ce22a7e9848c89c6be46b44297583"
       }
     },
-    { "src": "^/embed(.*)", "dest": "/embed.html" },
     {
       "src": "^/service-worker.js$",
       "dest": "/_next/static/service-worker.js",

pages/embed/[id].js

@@ -0,0 +1,42 @@
+import React from 'react'
+import Router from 'next/router'
+
+import EmbedPage from './index'
+import ApiContext from '../../components/ApiContext'
+
+import api from '../../lib/api'
+
+class EmbedIdPage extends React.PureComponent {
+  static contextType = ApiContext
+  static async getInitialProps({ req, res, query }) {
+    const path = query.id
+    const parameter = path && path.length >= 19 && path.indexOf('.') < 0 && path
+
+    let snippet
+    if (parameter) {
+      const host = req ? req.headers.host : undefined
+      snippet = await api.snippet.get(parameter, { host })
+      if (snippet && snippet.gist_id) {
+        return { snippet }
+      }
+
+      // 404 Not found
+      if (res) {
+        res.writeHead(302, {
+          Location: '/embed'
+        })
+        res.end()
+      } else {
+        Router.push('/embed')
+      }
+    }
+
+    return {}
+  }
+
+  render() {
+    return <EmbedPage {...this.props} />
+  }
+}
+
+export default EmbedIdPage

pages/embed/index.js

@@ -4,11 +4,11 @@ import Head from 'next/head'
 import { withRouter } from 'next/router'
 
 // Ours
-import ApiContext from '../components/ApiContext'
+import ApiContext from '../../components/ApiContext'
-import { StylesheetLink, CodeMirrorLink, MetaTags } from '../components/Meta'
+import { StylesheetLink, CodeMirrorLink, MetaTags } from '../../components/Meta'
-import Carbon from '../components/Carbon'
+import Carbon from '../../components/Carbon'
-import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants'
+import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../../lib/constants'
-import { getRouteState } from '../lib/routing'
+import { getRouteState } from '../../lib/routing'
 
 const Page = props => (
   <React.Fragment>
@@ -46,23 +46,11 @@ class Embed extends React.Component {
   snippet = {}
 
   async componentDidMount() {
-    const { queryState, parameter } = getRouteState(this.props.router)
+    const { queryState } = getRouteState(this.props.router)
-
-    if (parameter) {
-      const snippet = await this.context.snippet.get(parameter)
-      if (snippet) {
-        this.snippet = snippet
-      }
-    }
-
-    // TODO fix state!
-    this.i = setTimeout(() => {
-      this.setState(s => ({ key: s.key + 1 }))
-    }, 10)
 
     this.setState(
       {
-        ...this.snippet,
+        ...this.props.snippet,
         ...queryState,
         copyable: queryState.copy !== false,
         readOnly: queryState.readonly !== false,
@@ -72,10 +60,6 @@ class Embed extends React.Component {
     )
   }
 
-  componentWillUnmount() {
-    clearInterval(this.i)
-  }
-
   ref = React.createRef()
 
   postMessage = () => {
@@ -109,9 +93,9 @@ class Embed extends React.Component {
   render() {
     return (
       <Page theme={this.state.theme}>
-        {this.state.mounted && (
+        <div hidden={!this.state.mounted}>
           <Carbon
-            key={this.state.key}
+            key={this.state.mounted}
             ref={this.ref}
             config={this.state}
             readOnly={this.state.readOnly}
@@ -120,7 +104,7 @@ class Embed extends React.Component {
           >
             {this.state.code}
           </Carbon>
-        )}
+        </div>
         <style jsx global>
           {`
             .eliminateOnRender,