jeecms可以做网站卖吗,织梦动漫网站模板,wordpress yum,word模板网最近学习了Next.js 14框架#xff0c;总结一下预渲染技术和具体代码用法#xff0c;如果有理解不对的地方还请大佬指正。
注意以下内容只讨论App Router的新方案#xff08;getStaticProps已经弃用#xff09;。
1.简介
预渲染主要分为2种技术#xff0c;静态页面渲染(…最近学习了Next.js 14框架总结一下预渲染技术和具体代码用法如果有理解不对的地方还请大佬指正。
注意以下内容只讨论App Router的新方案getStaticProps已经弃用。
1.简介
预渲染主要分为2种技术静态页面渲染(SSG)和服务器端渲染(SSR
预渲染简单说就在浏览器访问网页页面时由服务器返回完整的html文件而不是部分数据。
2.静态页面渲染SSG
使用场景页面内容基本不怎么变动又考虑SEO优化和首次页面加载速度快。
优点SEO优化首页加载速度快服务端和客户端压力都小。
缺点内容更新不及时。
实现在编译项目的时候就把js动态页面编译成html静态页面客户端访问时服务器直接返回完整html文件有点返璞归真的意味。
主要情况有以下4种情况
1.以下是一个页面Page.js的内容在一个页面中没有任何动态操作时会被默认编译成静态页面html。
export default function MyPage(){return mainh1我的首页!/h1/main
} 2.以下是一个页面Page.js的内容在页面中上来就执行fetch操作时会被默认编译成静态页面。在编译时会直接去拉取https://jsonplaceholder.typicode.com/users的信息生成html。
export default async function MyPage(){const response await fetch(https://jsonplaceholder.typicode.com/users)const data await response.json()//以下不必关心主要看上面return(...此处省略/)
}3.动态路由
在动态路由中希望生成静态页面,添加getStaticPaths函数然后指定id对应的id的页面就在编译时生成静态页面。
export default async function Post({ params }) {const id params.postIdconst response await fetch(https://jsonplaceholder.typicode.com/posts/${id})//在服务器端获取数据const data await response.json()//以下不必关心主要看上面return (...此处省略)
}export async function getStaticPaths(){return {paths: [{params:{postId: 1}},{params:{postId: 2}},{params:{postId: 3}}],fallback: false}
}
其中fallback为false表示访问除了指定的1,2,3的postId之外的其他页面全报404找不到。
其中fallback为true表示访问除了指定的1,2,3的postId之外在客户端第一次访问改页面时会先返回一个加载过渡页面服务器会去尝试静态生成html然后在返回html给客户端。
其中fallback为block表示访问除了指定的1,2,3的postId之外在客户端第一次访问改页面时会卡住等待服务器会去尝试静态生成html然后在返回html给客户端。 4.增量静态生成 ISRBuff叠加
如果页面的内容是会更新的纯纯的静态页面就无法满足了那么可以使用ISR技术。
说人话就是我虽然是静态页面但是我只保持给定时间如5秒钟超过5秒钟后如果有客户端来访问服务器就重新去fetch数据重新生成一次html再返回给客户端。
export const revalidate 5 //5s后如果有请求则重新生成该页面export default async function MyPage(){const response await fetch(https://jsonplaceholder.typicode.com/users)const data await response.json()//以下是data的使用不必关心主要看上面return(...此处省略/)
}
如上只需要把revalidate设定并export出去就可以使用ISR技术了是不是很简单。 3.服务端页面渲染SSR
使用场景页面内容经常变动又考虑SEO优化和页面加载速度快。
优点SEO优化首次加载速度快客户端压力小。
缺点服务端压力变大。
实现服务端渲染就是客户端每次页面访问时服务器都会重新fetch拉取数据并重新生成html再返回给客户端。
使用方法如下。
export default async function MyPage(){const response await fetch(https://jsonplaceholder.typicode.com/users,{ cache: no-store})const data await response.json()//以下不必关心主要看上面return(...此处省略/)
}
只需要在fetch后面加入{ cache: no-store}就可以开启了是不是很简单。 4.客户端页面渲染CSR
使用场景用户动态交互很多的页面也不需要SEO。
优点动态交互服务器压力小。
缺点首次加载速度慢页面内容不是纯html不利于SEO。
实现这种就是传统的react的方式利用useEffect去拉取数据注意一定要标明use client不是nextjs的方式了但是也可以在nextjs中使用。
use client//默认next.js为use server所有使用CSR时必须添加该标识import { useState,useEffect } from react;//客户端获取数据的方法
function MyPage(){const [data, setData] useState(null)useEffect((){async function fetchMyData() {const response await fetch(https://jsonplaceholder.typicode.com/users)const data await response.json()setData(data)}fetchMyData()},[])//以下不必关心主要看上面return (...此处省略
}export default MyPage
总结
在实际开发一个网站时可能需要将以上几种方案混合在一起发挥各自的特长而且这些都可以在Next.js中做到是不是很强大哈哈以上是我的学习总结希望能帮到你加油
