V pre0.3_6
parent
4b72a70c63
commit
dbebe815e7
Binary file not shown.
|
After Width: | Height: | Size: 583 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
@ -1,55 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { Link } from "gatsby"
|
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
|
||||||
import Seo from "../components/seo"
|
|
||||||
|
|
||||||
const UsingSSR = ({ serverData }) => {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<h1>
|
|
||||||
This page is <b>rendered server-side</b>
|
|
||||||
</h1>
|
|
||||||
<p>
|
|
||||||
This page is rendered server side every time the page is requested.
|
|
||||||
Reload it to see a(nother) random photo from{" "}
|
|
||||||
<code>dog.ceo/api/breed/shiba/images/random</code>:
|
|
||||||
</p>
|
|
||||||
<img
|
|
||||||
style={{ width: "320px", borderRadius: "var(--border-radius)" }}
|
|
||||||
alt="A random dog"
|
|
||||||
src={serverData.message}
|
|
||||||
/>
|
|
||||||
<p>
|
|
||||||
To learn more, head over to our{" "}
|
|
||||||
<a href="https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/">
|
|
||||||
documentation about Server Side Rendering
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
<Link to="/">Go back to the homepage</Link>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Head = () => <Seo title="Using SSR" />
|
|
||||||
|
|
||||||
export default UsingSSR
|
|
||||||
|
|
||||||
export async function getServerData() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`https://dog.ceo/api/breed/shiba/images/random`)
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error(`Response failed`)
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
props: await res.json(),
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
return {
|
|
||||||
status: 500,
|
|
||||||
headers: {},
|
|
||||||
props: {},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
// If you don't want to use TypeScript you can delete this file!
|
|
||||||
import * as React from "react"
|
|
||||||
import { PageProps, Link, graphql, HeadFC } from "gatsby"
|
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
|
||||||
import Seo from "../components/seo"
|
|
||||||
|
|
||||||
type DataProps = {
|
|
||||||
site: {
|
|
||||||
buildTime: string
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const UsingTypescript: React.FC<PageProps<DataProps>> = ({
|
|
||||||
data,
|
|
||||||
location,
|
|
||||||
}) => (
|
|
||||||
<Layout>
|
|
||||||
<h1>
|
|
||||||
Gatsby supports <b>TypeScript by default</b>
|
|
||||||
</h1>
|
|
||||||
<p>
|
|
||||||
This means that you can create and write <code>.ts/.tsx</code> files for
|
|
||||||
your pages, components, and <code>gatsby-*</code> configuration files (for
|
|
||||||
example <code>gatsby-config.ts</code>).
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
For type checking you'll want to install <code>typescript</code> via npm
|
|
||||||
and run <code>tsc --init</code> to create a <code>tsconfig</code> file.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You're currently on the page <code>{location.pathname}</code> which was
|
|
||||||
built on {data.site.buildTime}.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
To learn more, head over to our{" "}
|
|
||||||
<a href="https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/">
|
|
||||||
documentation about TypeScript
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
<Link to="/">Go back to the homepage</Link>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
|
|
||||||
export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />
|
|
||||||
|
|
||||||
export default UsingTypescript
|
|
||||||
|
|
||||||
export const query = graphql`
|
|
||||||
{
|
|
||||||
site {
|
|
||||||
buildTime(formatString: "YYYY-MM-DD hh:mm a z")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
Loading…
Reference in New Issue