# React+Next.js+Koa2开发Github全栈项目

**Repository Path**: Well-to-do/next_github

## Basic Information

- **Project Name**: React+Next.js+Koa2开发Github全栈项目
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-07
- **Last Updated**: 2021-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[React16.8+Next.js+Koa2开发Github全栈项目](https://coding.imooc.com/class/chapter/334.html)

#### redis安装
```
brew install redis
brew services start redis
redis-server
redis-cli
```

```
set session:sessionId xxx
get session:sessionId
KEYs *
DEL x
```

#### next路由
##### 动态路由

```
import Link from 'next/link'
import Router from 'next/router'
Router.push({
    pathname: '',
    query: {
        
    }
})

// 只能通过 query
import {withRouter} from 'next/router'
const App = ({router}) => {router.query.}
export defatult withRouter(App)
```
##### 路由映射
```
<Link href="/a?id=1" as="/a/1"></Link>
Router.push({
    pathname: '',
    query: {}
}, '/router/a/1')
```

##### 路由变化的钩子
https://nextjs.org/docs/api-reference/next/router#routerevents

#### 获取数据
##### getInitialProps
[getInitialProps](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps)

##### 自定义app
* 固定Layout
* 保持一些公用状态
* 给页面传入一些自定义数据
* 自定义错误处理

#### CSS-IN-JS

##### styled-jsx
https://github.com/vercel/styled-jsx
```
<style jsx>{`.className {}`}</style>
```
##### styled-component
https://styled-components.com/docs/advanced#server-side-rendering

#### nextjs中异步模块和组件的加载
```
import dynamic from 'next/dynamic'

const Component = dynamic(import('../components/'))
```

#### 服务端渲染流程

> 浏览器发起page请求 -> koa接收到请求并调用nextjs ->
nextjs开始渲染 -> 调用app的getInitialProps ->
调用页面的getInitialProps -> 渲染HTML

* 如何实现服务端数据渲染在客户端重用
* 客户端链接跳转做的哪些事情
* 使用 getInitialProps 进行数据加载的原因