From 9a7f29c981d618ca2b3570a93cde35f85da72513 Mon Sep 17 00:00:00 2001
From: Luis Alvarez D <luis@zeit.co>
Date: Fri, 3 Apr 2020 02:45:00 -0500
Subject: [PATCH] [Docs] Remove concepts folder (#11621)

---
 docs/concepts/_data-fetching.md               |  75 ----------
 docs/concepts/_server-side-and-client-side.md | 133 ------------------
 2 files changed, 208 deletions(-)
 delete mode 100644 docs/concepts/_data-fetching.md
 delete mode 100644 docs/concepts/_server-side-and-client-side.md

diff --git a/docs/concepts/_data-fetching.md b/docs/concepts/_data-fetching.md
deleted file mode 100644
index b5496b255f37d..0000000000000
--- a/docs/concepts/_data-fetching.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Data Fetching
-
-As outlined in the `pages` documentation Next.js has 2 render modes:
-
-- Static Generation
-- Server-Side Rendering
-
-Next.js provides methods to do data fetching for both modes. These methods are agnostic to your data solution.
-Meaning you can use any data solution, from fetching rest APIs to GraphQL.
-
-Both of modes have different trade-offs and use different methods of data fetching.
-
-## Static Generation
-
-[Read more about how Static Generation works]().
-
-By default Next.js renders pages to static HTML at build time.
-
-However sometimes you might want to fetch some data from an external source while preserving the static generation behavior.
-
-Next.js provides the `getStaticProps` method to do exactly that, fetch data and render to static HTML.
-
-```jsx
-import fetch from 'isomorphic-unfetch'
-
-// Called at build time and renders the page to static HTML.
-export async function getStaticProps() {
-  const res = await fetch('https://api.github.com/repos/zeit/next.js')
-  const json = await res.json()
-
-  return {
-    props: {
-      stars: json.stargazers_count,
-    },
-  }
-}
-
-function HomePage({ stars }) {
-  return <div>Next stars: {stars}</div>
-}
-
-export default HomePage
-```
-
-## Server-Side Rendering
-
-[Read more about how Server-Side Rendering works]().
-
-To opt-in to Server-Side Rendering, making every request render HTML on-demand you use the `getServerSideProps` method.
-
-It allows you to fetch data before rendering starts when a request comes in.
-
-Taking the same example as Static Generation, but opted into rendering the page when a request comes in.
-
-```jsx
-import fetch from 'isomorphic-unfetch'
-
-// Called when a request comes in.
-export async function getServerSideProps() {
-  const res = await fetch('https://api.github.com/repos/zeit/next.js')
-  const json = await res.json()
-
-  return {
-    props: {
-      stars: json.stargazers_count,
-    },
-  }
-}
-
-function HomePage({ stars }) {
-  return <div>Next stars: {stars}</div>
-}
-
-export default HomePage
-```
diff --git a/docs/concepts/_server-side-and-client-side.md b/docs/concepts/_server-side-and-client-side.md
deleted file mode 100644
index 571af2659ace8..0000000000000
--- a/docs/concepts/_server-side-and-client-side.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Server-Side and Client-Side
-
-When working with Next.js, we tend to write isomorphic code that can be rendered in both Node.js and the browser, to give you a better idea, take a look at the following example:
-
-```jsx
-function Page() {
-  return <h1>Hello World</h1>
-}
-
-export default Page
-```
-
-The above example is pretty basic, but it properly demonstrates what an isomorphic `page` looks like. The page can be prerendered with Node.js to static HTML, and it can also be rendered by the browser.
-
-Now, what if the page tries to use a browser-only API?. Like so:
-
-```jsx
-function Page() {
-  return <h1>Hello World. Your user agent is: {navigator.userAgent}</h1>
-}
-
-export default Page
-```
-
-[`navigator`](https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator) is only available in the `window` object, therefore Node.js doesn't have access to it, so your page would end up in a server-side error.
-
-To work with code that only works in one side, read the sections below.
-
-> [Dynamic imports](/docs/advanced-features/dynamic-import.md) can also help you handle code that only loads when required.
-
-## Client-side only code
-
-If you need access to APIs that only exist in the browser, like `window`, then `useEffect` is the recommended solution. Take a look at the following example:
-
-```jsx
-import { useState, useEffect } from 'react'
-
-function Page() {
-  const [userAgent, setUserAgent] = useState()
-
-  useEffect(() => {
-    setUserAgent(navigator.userAgent)
-  }, [])
-
-  return <h1>Hello World. Your user agent is: {userAgent}</h1>
-}
-
-export default Page
-```
-
-Everything inside the function passed to `useEffect` will always run after the initial render, meaning it only runs in the browser.
-
-You can achieve the same using [class components](https://reactjs.org/docs/react-component.html), as in the following example:
-
-```jsx
-import React from 'react'
-
-class Page extends React.Component {
-  componentDidMount() {
-    this.setState({ userAgent: navigator.userAgent })
-  }
-  render() {
-    return <h1>Hello World. Your user agent is: {this.state.userAgent}</h1>
-  }
-}
-
-export default Page
-```
-
-`componentDidMount` will only execute in the browser, just like `useEffect`.
-
-> In both cases, `userAgent` will be `undefined` in the first render, and once `useEffect` or `componentDidMount` are executed, it will change to the value of `navigator.userAgent`.
-
-## Server-side only code
-
-Following the `userAgent` example from above, we can make it always available to the page by adding [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md), like so:
-
-```jsx
-import { useState, useEffect } from 'react'
-
-function Page({ userAgent }) {
-  return <h1>Hello World. Your user agent is: {userAgent}</h1>
-}
-
-Page.getInitialProps = ({ req }) => {
-  if (typeof window === 'undefined') {
-    return { userAgent: req.headers['user-agent'] }
-  } else {
-    return { userAgent: navigator.userAgent }
-  }
-}
-
-export default Page
-```
-
-The above example uses `req` to get the user agent in the server, and `navigator` if `getInitialProps` is executed in the browser.
-
-> `typeof window` not only allows the page to differentiate between sides, but it also enables webpack's dead code elimination. We replace `typeof window` with a constant using webpack [DefinePlugin](https://webpack.js.org/plugins/define-plugin/).
-
-Only the required code that passes the condition (`typeof window === 'undefined'`) will be included in the build. So the server-side build for the page's `getInitialProps` would look like:
-
-```jsx
-Page.getInitialProps = ({ req }) => {
-  return { userAgent: req.headers['user-agent'] }
-}
-```
-
-And the client-side build:
-
-```jsx
-Page.getInitialProps = ({ req }) => {
-  return { userAgent: navigator.userAgent }
-}
-```
-
-Thanks to dead code elimination, you could also import modules only for the required side, as in the following example:
-
-```jsx
-Page.getInitialProps = async ({ req }) => {
-  if (typeof window === 'undefined') {
-    const cookie = await import('cookie')
-    const cookies = cookie.parse(req.headers.cookie)
-
-    return { userAgent: req.headers['user-agent'], theme: cookies.theme }
-  } else {
-    const cookies = await import('js-cookie')
-
-    return { userAgent: navigator.userAgent, theme: cookies.get('theme') }
-  }
-}
-```
-
-And same as before, each build will only include the code that passes the condition.