React-SSR-Nextjs

文章目录

Nextjs
- 关于Nextjs的介绍
- Nextjs的优点
- 脚手架构建Nextjs的项目
- 路由配置
- - 路由跳转
  - - 标签式导航
    - 标签式导航跳转传参
    - 编程式导航
    - 编程式导航传参
    - 接收传过来的参数
- 路由钩子事件
- - - `routerChangeStart`路由发生变化时
    - `routerChangeComplete`路由结束变化时
    - `beforeHistoryChange`浏览器history触发前
    - `routeChangeError`路由跳转发生错误时
  - hash路由模式
  - - `hashChangeStart`hash跳转开始时执行
    - `hashChangeComplete`hash跳转完成时
- 组件使用
- `getInitialProps`
- - 使用axios发送请求获取数据
- 懒加载自定义组件
- - 使用dynamic对自定义组件进行组件的懒加载
- 让nextjs支持css
- - https://github.com/zeit/next-plugins
  - 安装`@zeit/next-css`
- 配置按需加载第三方组件库
- - 以antd为示例
  - - 安装和配置`babel-plugin-import` 插件
    - - 安装
      - 在项目根目录建立`.babelrc`文件，进行配置
- 配置APP入口

Nextjs

关于Nextjs的介绍

Next.js 是一个轻量级的 React 服务端渲染应用框架。有了它我们可以简单轻松的实现React的服务端渲染，从而加快首屏打开速度，也可以作SEO（收索引擎优化了）。在没有Next.js的时候，用React开发需要配置很多繁琐的参数，如Webpack配置，Router配置和服务器端配置等…。如果需要作SEO，要考虑的事情就更多了，怎么样服务端渲染和客户端渲染保持一致就是一件非常麻烦的事情，需要引入很多第三方库。但有了Next.js，这些问题都解决了，使开发人员可以将精力放在业务逻辑上，从繁琐的配置中解放出来

Nextjs的优点

完善的React项目架构，搭建轻松。比如：Webpack配置，服务器启动，路由配置，缓存能力，这些在它内部已经完善的为我们搭建完成了。
自带数据同步策略，解决服务端渲染最大难点。把服务端渲染好的数据，拿到客户端重用，这个在没有框架的时候，是非常复杂和困难的。有了Next.js，它为我们提供了非常好的解决方法，让我们轻松的就可以实现这些步骤。
丰富的插件帮开发人员增加各种功能。每个项目的需求都是不一样的，包罗万象。无所不有，它为我们提供了插件机制，让我们可以在使用的时候按需使用。你也可以自己写一个插件，让别人来使用。
灵活的配置，让开发变的更简单。它提供很多灵活的配置项，可以根据项目要求的不同快速灵活的进行配置
目前Next.js是React服务端渲染的最佳解决方案，所以如果你想使用React来开发需要SEO的应用，基本上就要使用Next.js

脚手架构建Nextjs的项目

create-next-app可以快速的创建Next.js项目；简单来说它就是一个脚手架

有三种方式可以通过create-next-app进行nextjs的项目构建
- ```
 npx create-next-app my-next-app
```

不是版本很低的nodejs,都会有npx这个模块；

// 在自己的命令行中输入查看版本号
npx -v
// 如果没有可以使用npm进行安装
npm install -g npx

```
 yarn create next-app my-next-app
```

// 先全局安装create-next-app的脚手架工具
npm install -g create-next-app
//使用create-next-app 构建
create-next-app my-next-app

全部安装后可以看到命令行的命令提示;cd到项目的目录中然后输入命令
```
yarn dev
//默认端口是locahost:3000; 如果端口号被占用可自行修改端口号
```
修改端口号
- 进入到项目根目录下的package.json
- 进去之后主要看script中的命令
- 修改dev和start端口都是在其后面加-p 端口即可
```
{"scripts": {"dev": "next dev -p 8999","build": "next build","start": "next start -p 8999"},
}
```

路由配置

nextjs脚手架生成的项目中pages文件夹下的文件/文件夹，运行时会被转成路由，

也就是说，当我们想要创建/list路由时，只需要创建一个list.js即可，或者创建文件夹，下建立index.js，nextjs会帮我们自动编译成路由

这个和nuxtjs相同，为我们节省了路由的配置，只需要关注我们的具体需求即可

路由跳转

标签式导航

使用Link

同路由跳转一样给我们想要跳转的套上Link标签和a标签即可

比如在index.js页面中，
首先我们需要先引入Link
```
import Link from 'next/link'
```
这里模拟跳转首页
要跳转其他路由，只需要在href中写对应的路由即可
```
return (<div><Link href="/"><a>首页</a></Link></div>
)
```
注意: 当我们想要在Link标签中嵌套两个跳转时，需要用一个父标签将他们包裹起来如a标签;它不支持兄弟标签并列的情况
```
<a><span>1</span><span>2</span>
</a>
```

如果不包裹就会出现报错，如下

client pings, but there's no entry for page: /_error
Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

标签式导航跳转传参

当然也可以直接在跳转路径上的拼接参数即可

<Link href={{pathname:'/',query:{name:'demo',id:1}}}><a>传参</a>
</Link>

编程式导航

使用Router模块进行跳转

引入Router
```
import Router from 'next/router'
```

这里为了简单演示，就直接在jsx中写了

<div><button onClick={()=>{Router.push('/')}}>首页</button>
</div>

编程式导航传参

使用,加入pathname和query即可

    Router.push({pathname:'/',query:{name:'demo',id: 1}})

接收传过来的参数

withRouter是Next.js框架的高级组件，用来处理路由用的

这里可以使用，拿取路由中的参数

import { withRouter} from 'next/router'
import Link from 'next/link'const Demo = ({router})=>{return (<><div>{router.query.name}</div><Link href="/"><a>返回首页</a></Link></>)
}export default withRouter(Demo)

路由钩子事件

在监听路由发生变化时，我们需要用Router组件，然后用on方法来进行监听

`routerChangeStart`路由发生变化时

   Router.events.on('routeChangeStart',(...args)=>{console.log('routeChangeStart->路由开始变化,参数为:',...args)})

`routerChangeComplete`路由结束变化时

  Router.events.on('routeChangeComplete',(...args)=>{console.log('routeChangeComplete->路由结束变化,参数为:',...args)})

`beforeHistoryChange`浏览器history触发前

  Router.events.on('beforeHistoryChange',(...args)=>{console.log('beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)})

`routeChangeError`路由跳转发生错误时

 Router.events.on('routeChangeError',(...args)=>{console.log('routeChangeError->跳转发生错误,参数为:',...args)})

hash路由模式

还有两种事件，都是针对hash的，所以现在要转变成hash模式。hash模式下的两个事件hashChangeStart和hashChangeComplete

`hashChangeStart`hash跳转开始时执行

  Router.events.on('hashChangeStart',(...args)=>{console.log('hashChangeStart->hash跳转开始时执行,参数为:',...args)})

`hashChangeComplete`hash跳转完成时

  Router.events.on('hashChangeComplete',(...args)=>{console.log('hashChangeComplete->hash跳转完成时,参数为:',...args)})

组件使用

当我们想自定义组件的使用的时候，我们可以在components文件夹下创建我们想要的组件

直接新建js文件或者新建文件夹在其下创建文件

使用的时候只需直接引入即可，和在react中使用一样，只不过这里是规范组件的定义规范

`getInitialProps`

在Next.js框架中提供了getInitialProps静态方法用来获取远端数据，这个是框架的约定，所以你也只能在这个方法里获取远端数据

使用axios发送请求获取数据

从props中解构{router,data}

data即为请求到的数据

import { withRouter} from 'next/router'
import Link from 'next/link'
import axios from 'axios'const Demo = ({router,data})=>{return (<><div>{router.query.name}{data}</div></>)
}Demo.getInitialProps = async ()=>{const promise =new Promise((resolve)=>{axios('https://').then((res)=>{console.log('数据：',res)resolve(res.data.data)})})return await promise
}export default withRouter(Demo)

懒加载自定义组件

使用dynamic对自定义组件进行组件的懒加载

引入dynamic

import dynamic from 'next/dynamic'

使用

import React, {useState} from 'react'
import dynamic from 'next/dynamic'const Demo = dynamic(import('../components/demo'))function DemoCom(){return (<div><Demo/></div>)
}
export default DemoCom;

可以自定义组件就是懒加载的，只有在jsx里用到时，才会被加载进来，如果不使用就不会被加载。

让nextjs支持css

Next.js默认是不支持CSS文件的，它用的是style jsx，

也就是说它是不支持直接用import进行引入css的。

如果引入会报错

https://github.com/zeit/next-plugins

这里有next的插件，有很多可自行查看

安装`@zeit/next-css`

它的主要功能就是让Next.js可以加载CSS文件，有了这个包才可以进行配置。

安装
```
yarn add @zeit/next-css
```

先创建next.config.js然后在其中进行配置，

const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){require.extensions['.css']=file=>{}
}
module.exports = withCss({})

配置按需加载第三方组件库

以antd为示例

安装

yarn add antd

安装和配置`babel-plugin-import` 插件

安装

yarn add babel-plugin-import

在项目根目录建立`.babelrc`文件，进行配置

完成后要重新打包编译才可生效

{"presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置"plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS["import",{"libraryName":"antd","style":"css"}]]
}

配置APP入口

在page目录下，新建一个_app.js文件，然后写入下面的代码。

就可以全局引入antd的样式了

import App from 'next/app'
import 'antd/dist/antd.css'export default App

React-SSR-Nextjs相关推荐

大前端时代，如何做好C 端业务下的React SSR？\n
React在中后台业务里已经很好落地了,但对于C端(给用户使用的端,比如PC/H5)业务有其特殊性,对性能要求比较苛刻,且有SEO需求.另外团队层面也希望能够统一技术栈,小伙伴们希望成长,那么如何能够 ...
react ssr原理
ssr 什么是ssr:server side render,服务端渲染不同于jsp,php等传统服务端渲染(这种情况下,前后端代码是分开的,写了两份) 目前的ssr是基于react vue等前端框架 ...
我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR
技术栈:webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌!可能是因为我很懒,导致...,然后,好吧,我比较懒,没有然 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
React SSR 服务器端渲染
React SSR 介绍什么是客户端渲染 CSR: Client Side Rendering 服务器端仅返回 JSON 数据,DATA 和 HTML 在客户端进行渲染什么是服务器端渲染 SSR: ...
React SSR - 01 SSR 介绍和快速开始
React SSR 介绍什么是客户端渲染 CSR:Client Side Rendering 数据和 HTML 的拼接是在客户端(浏览器)使用 JavaScript 完成的,服务端只需要返回 JSO ...
Next.js---一个轻量级的 React SSR应用框架
Next.js---一个轻量级的 React SSR应用框架为什么要用Next.js Next.js介绍优点创建项目目录结构 Next中的路由如何实现跳转带参跳转路由钩子使用数据请求 ...

React-SSR-Nextjs

文章目录

Nextjs

关于Nextjs的介绍

Nextjs的优点

脚手架构建Nextjs的项目

路由配置

路由跳转

标签式导航

标签式导航跳转传参

编程式导航

编程式导航传参

接收传过来的参数

路由钩子事件

`routerChangeStart`路由发生变化时

`routerChangeComplete`路由结束变化时

`beforeHistoryChange`浏览器history触发前

`routeChangeError`路由跳转发生错误时

hash路由模式

`hashChangeStart`hash跳转开始时执行

`hashChangeComplete`hash跳转完成时

组件使用

`getInitialProps`

使用axios发送请求获取数据

懒加载自定义组件

使用dynamic对自定义组件进行组件的懒加载

让nextjs支持css

https://github.com/zeit/next-plugins

安装`@zeit/next-css`

配置按需加载第三方组件库

以antd为示例

安装和配置`babel-plugin-import` 插件

安装

在项目根目录建立`.babelrc`文件，进行配置

配置APP入口

React-SSR-Nextjs相关推荐

最新文章

热门文章

React-SSR-Nextjs

文章目录

Nextjs

关于Nextjs的介绍

Nextjs的优点

脚手架构建Nextjs的项目

路由配置

路由跳转

标签式导航

标签式导航跳转传参

编程式导航

编程式导航传参

接收传过来的参数

路由钩子事件

routerChangeStart路由发生变化时

routerChangeComplete路由结束变化时

beforeHistoryChange浏览器history触发前

routeChangeError路由跳转发生错误时

hash路由模式

hashChangeStarthash跳转开始时执行

hashChangeCompletehash跳转完成时

组件使用

getInitialProps

使用axios发送请求获取数据

懒加载自定义组件

使用dynamic对自定义组件进行组件的懒加载

让nextjs支持css

https://github.com/zeit/next-plugins

安装@zeit/next-css

配置按需加载第三方组件库

以antd为示例

安装和配置babel-plugin-import 插件

安装

在项目根目录建立.babelrc文件，进行配置

配置APP入口

React-SSR-Nextjs相关推荐

最新文章

热门文章

`routerChangeStart`路由发生变化时

`routerChangeComplete`路由结束变化时

`beforeHistoryChange`浏览器history触发前

`routeChangeError`路由跳转发生错误时

`hashChangeStart`hash跳转开始时执行

`hashChangeComplete`hash跳转完成时

`getInitialProps`

安装`@zeit/next-css`

安装和配置`babel-plugin-import` 插件

在项目根目录建立`.babelrc`文件，进行配置