
上一篇博客中说到ssr服务器端渲染与客户端渲染的比较,这次介绍的Nextjs便是一款react完成ssr的一款同构框架
简述Next完成服务端渲染流程:

这里nextjs初探将介绍以下Nextjs 的页面跳转,路由切换,路由切换钩子,组件数据的获取(即上述图中的getInitialProps),Next异步加载组件和模块
Nextjs作为服务端渲染的同构框架,整体的项目结构中是不存在我们客户端渲染时的html文件的,所有的页面组件均是js(jsx)文件,而存在于pages下的js文件即使Next将为我们渲染的服务端页面,所以我们需要的页面均需要放到pages目录下。
- Nextjs页面切换:
页面切换
//在 Nextjs中为我们提供了一个 Link 组件用以实现页面的跳转
import Link from 'next/link'
const A = () => {
return (
<>
//页面的跳转时页面间的传参只能通过query形式,而Link标签中为我们提供了
//一个as属性方便我们将query进行隐藏统一,此时我们访问页面时原本的:
// /a?id=1 就变成了 :/a/1
<Link href="/a?id=1" as="/a/1">
<a>页面跳转到a</a>
</Link>
</>
)
}

注意: 此时我们更改的路由只是对于客户端而言(即使用的as设置),此时当我们再次刷新页面请求时会出现404的情况,即服务端并不知道我们的这个更改设置,所以我们还需要在服务端也进行相应的配置方可正常的执行。
=>这里我使用koa2框架进行简单的模拟:
const Koa = require('koa')
const Router = require('koa-router')
const next = require('next')
// 初始化nextjs
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
// handle函数处理http请求的一个响应
const handle = app.getRequestHandler()
// 等待处理响应请求后执行相应的操作
app.prepare().then(() => {
const server = new Koa()
const router = new Router()
//对路由的切换进行相应的配置
router.get('/a/:id', async (ctx) => {
const id = ctx.params.id
await handle(ctx.req, ctx.res, {
pathname: '/a',
query: { id }
})
ctx.response = false
})
server.use(router.routes())
server.use(router.routes())
server.listen(3000, () => {
console.log('koa server listening on 3000')
})
})
(2)方式2:
路由跳转
//此时我们需要引入 Next提供的Router
import Router from 'next/Router'
//定义一个页面跳转的函数;
function gotoPage () {
Router.push({
//页面跳转的路由
pathname: '/a',
//通过query传递的值
query: {
id: 1
}
//此时的第二个参数作用和Link标签的as属性相似
}, '/a/1')
}
2.路由切换的钩子函数:
//路由切换的六个钩子函数
const event = [
"routeChangeStart",
"routeChangeComplete",
"routeChangeError",
"beforeHistoryChange",
"hashChangeStart",
"hashChangeComplete"
]
//我们定义一个函数去打印以下这些钩子函数的执行顺序:
//函数的参数type是我们传入的事件的类型,args是在某一钩子函数执行时的参数值
function makeEvent(type) {
return ( ...args ) => {
console.log(type, ...args)
}
}
//即我们便利event数组,为每一个钩子函数都绑定上监听的事件,Router就是我们之前引入的Router,这里不再引入
event.forEach(event => {
Router.events.on(event, makeEvent(event))
})
页面跳转时执行的顺序:

在hash改变时的执行顺序:

3.组件数据的获取:
对于之前在进行客户端渲染的时候,我们的数据获取都放到了组件的生命周期函数中去执行,或者是使用了redux后使用redux-thunk去进行获取,但是在ssr中,我们需要在组件渲染之前拿到我们需要的渲染数据,然后再到组件上去渲染html,那么,Nextjs最强大的能力: getInitialProps()就能够帮助我们再组件渲染之前去拿到我们的渲染数据,去完成组件的服务端渲染。
//我们定义一个组件A ,去展示我们在getInitialProps之后拿到的数据
const A = ({ name }) => {
return (
<>
<div>{name}</div>
</>
)
}
//我们为组件绑定上getInitialProps
//由于之后的数据获取很多都是异步执行的,所以我们这儿使用async对函数进行包裹
A.getInitialProps = async (ctx) => {
//定义一个异步的仿制数据:
const promise = new Promise((resolve, reject) =>{
setTimeout(() => {
resolve({
name: 'webChen'
})
}, 1000)
})
return await promise
}
此时,我们在页面上便能看到我们geiInitialProps中的"webChen"这个字符出,这就表示,在渲染A组件之前我们会先对调用getInitialProps()去获取到数据.
4.异步加载模块和Lazy加载:
**对于一些我们只在某一组件中使用的模块,我们不需要在整个项目文件刚开始加载的时候就将它给加载进去,所以就可以将整个模块放到组件的getInitialProps()中去进行加载。
//例如,这里我们异步加载moment模块:
A.getInitialProps = async (ctx) => {
const moment = await import('moment')
}
而对于一些组件也是,我们在使用的时候才加它,即使用Lazy加载:
//使用Lazy加载组件我们需要引入dynamic
import dynamic from 'next/dynamic'
// LazyLoading Component
const Comp = dynamic(import('../component/Compo.js'))
此时我们的Comp组件就会在执行到这条代码是从才开始去加载这个组件过来
这里介绍的是一些nextjs的基本操作,对于NextJs的config配置等将会在下一次说到.
本文介绍Next.js服务端渲染(SSR)流程,包括页面跳转、路由切换、组件数据获取及异步加载。Next.js简化SSR开发,通过getInitialProps在组件渲染前获取数据。
276

被折叠的 条评论
为什么被折叠?



