同构框架:Nextjs初探

本文介绍Next.js服务端渲染(SSR)流程,包括页面跳转、路由切换、组件数据获取及异步加载。Next.js简化SSR开发,通过getInitialProps在组件渲染前获取数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
上一篇博客中说到ssr服务器端渲染与客户端渲染的比较,这次介绍的Nextjs便是一款react完成ssr的一款同构框架

简述Next完成服务端渲染流程:

在这里插入图片描述
这里nextjs初探将介绍以下Nextjs 的页面跳转,路由切换,路由切换钩子,组件数据的获取(即上述图中的getInitialProps),Next异步加载组件和模块

Nextjs作为服务端渲染的同构框架,整体的项目结构中是不存在我们客户端渲染时的html文件的,所有的页面组件均是js(jsx)文件,而存在于pages下的js文件即使Next将为我们渲染的服务端页面,所以我们需要的页面均需要放到pages目录下。

  1. 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配置等将会在下一次说到.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值