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 Next stars: {stars}
-}
-
-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 Next stars: {stars}
-}
-
-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 Hello World
-}
-
-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 Hello World. Your user agent is: {navigator.userAgent}
-}
-
-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 Hello World. Your user agent is: {userAgent}
-}
-
-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 Hello World. Your user agent is: {this.state.userAgent}
- }
-}
-
-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 Hello World. Your user agent is: {userAgent}
-}
-
-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.