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