服务器生成js文件,Next.js 静态生成和服务器端渲染
Next.js具有两种形式的预渲染:静态生成和服务器端渲染
getStaticProps(静态生成):在构建时获取数据。
getStaticPaths(静态生成):根据数据指定要[动态]渲染的[动态路由]。
getServerSideProps(服务器端渲染):在每个请求上获取数据。
getStaticProps(静态生成)
呈现页面所需的数据可在构建时在用户请求之前获得。
该页面必须预渲染(对于SEO)并且必须非常快- getStaticProps生成HTML和JSON文件,CDN可以将它们都缓存以提高性能。
import { GetStaticProps } from 'next' // 对于TypeScript,您可以使用以下GetStaticProps类型next
export async function getStaticProps: GetStaticProps(context) {
return {
props: {}, // 将作为道具传递到页面组件
}
}
getStaticPaths(静态生成)
如果页面具有动态路由并使用 getStaticProps 它,则需要定义一个在构建时必须呈现为HTML的路径列表。
如果从使用动态路由的页面导出async调用的函数getStaticPaths,则Next.js将静态预呈现由指定的所有路径getStaticPaths。
例如,假设有一个使用动态路由的页面pages/posts/[id].js。如果您getStaticPaths从此页面导出并返回以下内容paths:
getStaticPaths 仅在构建时在服务器端运行。
export async function getStaticPaths() {
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } }
],
fallback: true or false
};
}
// 在使用 getStaticProps 静态生成
export async function getStaticProps({ params }) {
// 参数包含post ' id '。
// 如果路由类似/posts/1,则params。id是1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// 通过道具将post数据传递到页面
return { props: { post } }
}
getServerSideProps(服务器端渲染)
getServerSideProps仅在服务器端运行,而从不在浏览器上运行。
getServerSideProps 比 getStaticProp 花的时间要慢由于服务器必须在每个请求上计算结果,并且如果没有额外的配置,结果不能由CDN缓存。
如果不需要预渲染数据,则应考虑在客户端获取数据。
import { GetServerSideProps } from 'next' //TypeScript:使用 GetServerSideProps
export async function getServerSideProps:GetServerSideProps (context) {
return {
props: {}, // 将作为道具传递到页面组件
}
}
服务器生成js文件,Next.js 静态生成和服务器端渲染相关推荐
- C++ dll库只生成dll文件,而未生成lib文件的问题
C++ dll库只生成dll文件,而未生成lib文件的问题 逐项检查 逐项检查 新建项目时,选择应用程序类型为dll,并勾选"Export Symbols": 属性->链接器 ...
- Java读取pdf模板,并动态生成pdf文件,如动态生成准考证
Java读取pdf模板,并动态生成pdf文件,如动态生成准考证 前几天遇到了一个生成准考证的需求,并提供用户下载,然后百度了一圈还是觉得使用itextpdf这个框架好用点.但是还需要找到一个能创建 ...
- 【jsdoc-to-markdown】一步步实现js文件的文档生成
文章目录 导读 开发环境 安装Vs code插件:Doxygen Documentation Generator 效果 优势 jsdoc-to-markdown的使用 了解 jsdoc jsdoc-t ...
- myeclipse 生成html文件 调用js,MyEclipse怎么创建一个js文件
优质回答 回答者:牛小凡 点击file -- new -- 输入javascript 然后选择下面的javascript source file 输入名字 ,点击finish 就能新建js文件了,如下 ...
- 服务器上引用不了js文件,pdf.js不通过服务器如何像普通js文件引入使用
之前有点忙,现在来补充一下这个问题的解决方案: 由于发现在苹果手机的微信直接打来非常流畅,所以在苹果手机的微信打开服务器上的pdf时,不采用pdf.js,直接打开,这个解决方案是针对安卓手机在微信打开 ...
- 用php生成html文件,怎样用PHP生成html文件
总结一 贴子发出后,得到网友们的热烈响应和帮助,为回报各位村民,特把有效回贴整理出 1,Matrix@Two_Max的发贴: <?php $fp = fopen ("templets. ...
- aidl生成java文件_Android AIDL自动生成Java文件测试
/******************************************************************************** * Android AIDL自动生成 ...
- swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用 话不多说,直接上教程 1.首先加载插件,需要用到 ...
- 用python生成excel文件_python通过openpyxl生成Excel文件的方法
本文实例讲述了python通过openpyxl生成Excel文件的方法.分享给大家供大家参考.具体如下: 使用前请先安装openpyxl: easy_install openpyxl 通过这个模块可以 ...
最新文章
- 两个超长正整数的加法c语言,二个超长正整数的相加
- [导入]XML for Analysis(XMLA)开发详解-(3)各版本的SQL Server及Windows下配置XMLA over HTTP访问SASS(OLAP)的文档合集...
- BZOJ 1406 密码箱(数论)
- xamarin 学习笔记02- IOS Simulator for windows 安装
- overflowhidden用法思考
- DHCP 中继实验
- bootstrap学习(五)代码
- 6工程文件夹作用_data_dragon数据工程小工具收集
- 如何用PPT编制方案 (2)PPT内容的逻辑表达
- Linux将数据从小存储通过FTP发送到大存储中
- 运用正则表达式在Asp中过滤Html标签代码的四种不同方法
- 推荐一些经典的编程从入门到进阶的书籍-附下载资源
- 常用路由器的帐号和密码大全
- 无需脑图 无需思维导图 看Word大纲视图
- 《我十年的程序员生涯》系列之三:阳光灿烂的日子
- 博客文章分类导引(持续更新)
- 关于类的静态的模板函数的使用方式
- 磨金石教育摄影技能干货分享|优秀作品欣赏—技巧十足的艺术摄影
- ai人工智能将替代人类_AI再次击败人类
- 常用html/css/js学习(会持续更新)