Next.js AppRouter入门教程

在Next13.4以后官方开始默认使用了AppRouter。NextJs使用了React的canary中的use client 和use server来分割当前组件时处于服务端或者客户端渲染的组件。在这篇文章我会讲Next服务端组件渲染数据请求的一些个人理解。

App router中默认组件是使用的服务端渲染

服务端组件 目前提供了三种策略 :Static Rendering (静态渲染,默认使用 ),Dynamic Rendering(动态渲染),Streaming(流式渲染)。这三种策略是却决你使用了NextJs的那些Api在打包时可以看见你那些组件使用了那种策略。

由于服务端渲染是在服务器渲染完成,所以使用时会有一些限制,可参考下面官方提供的图来思考应该如何划分你的组件。简单来说就是服务端组件无法使用React Hook和浏览器的Api。

1.Static Rendering(默认使用)

优点:在打包时就渲染好了页面,所以用户访问速度快。

缺点:因为是在打包时就渲染好了,所以页面如果是需要经常变动的就不适用。

2.Dynamic Rendering

优点:在用户进入页面时每次都会在服务端渲染然后发给用户。

缺点:访问量大会消耗较多的服务器资源。

3.Streaming

优点:可以将一个页面内的服务器渲染组件进行一个分割,提高用户体验。

数据请求

因为NextJs对fetch进行了处理,服务端组件 在使用fetch请求数据时默认会对数据进行**强制缓存,**但是也提供了属性来帮你做调整。

force-cache(这是默认属性强制缓存数据,你可以不填。

php 复制代码
// 'force-cache' 
fetch('https://...', { cache: 'force-cache' })

no-store(不缓存数据,每次都重新获取数据渲染页面

php 复制代码
fetch('https://...', { cache: 'no-store' })

revalidate(ISR增量渲染**)**

因为ISR页面在访问的时候会先发一份页面给用户,然后在检测是否过期,如果过期就重新渲染一份下一次使用。

所以他可以解决一些问题:假设你的页面是Static Rendering 或者Dynamic Rendering

但是你某个点又想更新数据你就可以根据时间做调整。

javascript 复制代码
// ISR 每 10 秒重新获取一次
export default async function Home() {
  const data = await fetch("https://api.github.com/repos/vercel/next.js", {
    next: {
      revalidate: 10,
    },
  }).then((res) => res.json());
  return <div>{data.id}
}

最后

以上内容是结合官方文档的一些个人看法,有不对和不足的地方希望指出。这只是NextJs其中很小的一部分后面会持续的输出其他东西~

相关推荐
烛阴28 分钟前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
卓码软件测评1 小时前
【第三方网站运行环境测试:服务器配置(如Nginx/Apache)的WEB安全测试重点】
运维·服务器·前端·网络协议·nginx·web安全·apache
龙在天1 小时前
前端不求人系列 之 一条命令自动部署项目
前端
开开心心就好1 小时前
PDF转长图工具,一键多页转图片
java·服务器·前端·数据库·人工智能·pdf·推荐算法
国家不保护废物1 小时前
10万条数据插入页面:从性能优化到虚拟列表的终极方案
前端·面试·性能优化
文心快码BaiduComate2 小时前
七夕,画个动态星空送给Ta
前端·后端·程序员
web前端1232 小时前
# 多行文本溢出实现方法
前端·javascript
文心快码BaiduComate2 小时前
早期人类奴役AI实录:用Comate Zulu 10min做一款Chrome插件
前端·后端·程序员
人间观察员2 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
布列瑟农的星空2 小时前
大话设计模式——多应用实例下的IOC隔离
前端·后端·架构