NodeJS系列（11） - Next.js 框架 (四) | 数据获取(Data Fetching)

小卡拉米 發表於 2023-8-14 18:40:00

NodeJS系列（11）- Next.js 框架 (四) | 数据获取(Data Fetching)

在 “NodeJS系列（8）- Next.js 框架 (一) | 安装配置、路由（Routing）、页面布局（Layout）” 里，我们简单介绍了 Next.js 的安装配置，创建了 nextjs-demo 项目，讲解和演示了 Next.js 项目的运行、路由（Routing）、页面布局（Layout）等内容。 在 “NodeJS系列（9）- Next.js 框架 (二) | 国际化 (i18n)、中间件 (Middleware)” 里，我们在 nextjs-demo 项目基础上，讲解和演示了 Next.js 项目的国际化 (i18n)、中间件 (Middleware) 等内容。 在 “NodeJS系列（10）- Next.js 框架 (三 ) | 渲染(Rendering)” 里，我们在 nextjs-demo 项目基础上，讲解和演示了渲染(Rendering)。 本文继续在 nextjs-demo 项目（Pages Router）基础上，讲解和演示数据获取(Data Fetching)。 NextJS: https://nextjs.org/ NextJS GitHub: https://github.com/vercel/next.js
 
<h3>1. 系统环境</h3>
    操作系统：CentOS 7.9 (x64)     NodeJS: 16.20.0     NPM: 8.19.4     NVM: 0.39.2     NextJS: 13.4.12
 
<h3>2. 数据获取 (Data Fetching)</h3>
    Next.js 中的数据提取允许您根据应用程序的用例以不同的方式呈现内容。其中包括使用服务器端渲染或静态生成进行预渲染，以及使用增量静态再生成在运行时更新或创建内容。     数据获取相关的几个函数：        (1) getStaticProps，用于构建时获取一些静态数据，默认情况下只会在构建时执行一次，之后的每次请求都会使用构建时的数据。        (2) getStaticPaths，从使用动态路由的页面导出名为 getStaticPaths 的函数时，Next.js 将静态预渲染 getStaticPaths 指定的所有路径。        (3) getServerSideProps，从页面导出名为 getServerSideProps（服务器端渲染）的函数时，Next.js 将使用getServerSideProps 返回的数据在每次请求时预渲染该页面。        (4) getInitialProps，是一个遗留的API。建议使用 getStaticProps 或 getServerSideProps。
 
<h3>3. getStaticProps</h3>
    如果从页面导出一个名为 getStaticProps（静态站点生成）的函数，Next.js 将在构建时使用 getStaticProps 返回的 props 预渲染此页面。     getStaticProps 适用于如下情景:         (1) 渲染页面所需的数据在用户请求之前的构建时（build）可用         (2) 数据来自 Headless CMS         (3) 页面必须预渲染（用于 SEO）并且速度非常快 —— getStaticProps 生成 HTML 和 JSON 文件，这两个文件都可以通过 CDN 缓存以提高性能         (4) 数据可以被公开缓存（不是特定于用户的）。在某些特定情况下，可以通过使用中间件重写路径来绕过此条件。     getStaticProps 何时运行（被调用）:         (1) 在 next build 期间，getStaticProps 会被调用         (2) 当使用 fallback：true 时，getStaticProps 在后台运行         (3) 当使用 fallback: blocking 时，初始渲染之前调用 getStaticProps         (4) 当使用 revalidate 时，getStaticProps 在后台运行         (5) 当使用 revalidate 时，getStaticProps 在后台按需运行         注：getStaticProps 始终在服务器上运行，而从不在客户端上运行。可以使用此工具 (https://next-code-elimination.vercel.app/) 验证在 getStaticProps 中编写的代码是否已从客户端捆绑包中删除。             使用 fallback：true，表示如果访问的页面不存在，Next.js 会返回一个 fallback 页面。这个 fallback 页面会在客户端重新生成，并在浏览器中显示。             使用 fallback: blocking，表示页面的渲染将在所有数据准备就绪后再进行。                    使用 revalidate，即增量静态再生成，getStaticProps 将在后台运行，同时重新验证陈旧页面，并将新页面提供给浏览器。     getStaticProps 的限制性：         （1）getStaticProps 无法访问传入请求（如查询参数或HTTP标头），因为它生成静态 HTML。如果需要访问页面请求，请考虑除了使用 getStaticProps 之外还使用中间件。         （2）getStaticProps 只能从页面导出。不能从非页面文件、_app、_document 或 _error 导出它。这种限制的原因之一是 React 需要在渲染页面之前拥有所有所需的数据。         （3）必须将导出 getStaticProps 作为一个独立函数使用 —— 如果将 getStaticProps 添加为页面组件的属性，它将不起作用。       在开发模式（next dev）中，将对每个请求调用 getStaticProps，可以暂时绕过静态生成。例如，可能正在使用无头 CMS，并且希望在草稿发布之前预览草稿。     1) 使用 getStaticProps 从 external API 获取数据         示例，创建 src/pages/render/data1.js 文件，代码如下：
<div class="cnblogs_code">
<pre> export default ({ repo }) => {
 return repo.stargazers_count
 }

 export const getStaticProps = async () => {
 const res = await fetch('https://api.github.com/repos/vercel/next.js')
 const repo = await res.json()
 return { props: { repo } }
 }</pre>
</div>
        开发模式运行 nextjs-demo 项目，即运行 npm run dev 命令。                  使用浏览器访问 http://localhost:3000/render/data1，显示内容如下：             Home  Login     # 菜单             110193             Footer     2) 直接编写服务器端代码         由于 getStaticProps 仅在服务器端运行，因此它永远不会在客户端运行。它甚至不会包含在浏览器的 JS 捆绑包中，因此可以直接编写数据库查询，而无需将其发送到浏览器。         这意味着，可以直接在 getStaticProps 中编写服务器端代码，而不是从 getStaticProps 获取API路由（它本身从外部源获取数据）。         示例，API 路由用于从 CMS 获取一些数据。然后直接从 getStaticProps 调用该 API 路由。这会产生额外的调用，从而降低性能。相反，从 CMS 获取数据的逻辑可以通过使用 lib/ 目录来共享。然后可以与 getStaticProps 共享。                     创建 src/pages/render/lib/load-posts.js 文件，代码如下：
<div class="cnblogs_code">
<pre> // The following function is shared
 // with getStaticProps and API routes
 // from a `lib/` directory
 export const loadPosts = async () => {
 // Call an external API endpoint to get posts
 const res = await fetch('https://.../posts/')
 const data = await res.json()

 return data
 }</pre>
</div>
 
        创建 src/pages/render/blog.js 文件，代码如下：
<div class="cnblogs_code">
<pre> // pages/blog.js
 import { loadPosts } from './lib/load-posts'

 // This function runs only on the server side
 export const getStaticProps = async () => {
 // Instead of fetching your `/api` route you can call the same
 // function directly in `getStaticProps`
 const posts = await loadPosts()

 // Props returned will be passed to the page component
 return { props: { posts } }
 }</pre>
</div>
         如果不使用 API 路由来获取数据，则可以在 getStaticProps 中直接使用 fetch API 来获取数据。     3) 静态生成 HTML 和 JSON         当在构建时预渲染带有 getStaticProps 的页面时，除了页面 HTML 文件外，Next.js 还会生成一个 JSON 文件，其中包含运行 getStaticProps 的结果。         此 JSON 文件将用于通过 next/link 或 next/router 的客户端路由。当导航到使用 getStaticProps 预渲染的页面时，Next.js 会获取这个 JSON 文件（在构建时预先计算），并将其用作页面组件的道具。这意味着客户端页面转换不会调用 getStaticProps，因为只使用导出的 JSON。         当使用增量静态生成时，getStaticProps 将在后台执行，以生成客户端导航所需的 JSON。可能会以对同一页面发出多个请求的形式看到这一点，但是，这是有意的，对最终用户性能没有影响。
 
<h3>4. getStaticPaths</h3>
    如果页面具有动态路由并使用 getStaticProps，则需要定义要静态生成的路径列表。     从使用动态路由的页面导出名为 getStaticPaths（静态站点生成）的函数时，Next.js 使用 getStaticPaths 指定静态预渲染所有路径。     getStaticPaths 适用于如下情景:         (1) 数据来自 Headless CMS         (2) 数据来自数据库         (3) 数据来自文件系统         (4) 数据可以公开缓存（不是特定于用户）         (5) 页面必须预渲染（用于SEO）并且速度非常快 —— getStaticProps 生成 HTML 和 JSON 文件，这两个文件都可以通过 CDN 缓存以提高性能         注：每种情景都是基于静态预渲染使用动态路由的页面     getStaticPaths 何时运行（被调用）:         (1) 在 next build 期间，getStaticProps 需要 getStaticPaths 运行返回路径列表         (2) 当使用 fallback：true 时，getStaticProps 在后台运行，需要 getStaticPaths 运行返回路径列表         (3) 当使用 fallback: blocking 时，在初始渲染之前调用 getStaticProps，需要 getStaticPaths 运行返回路径列表         注：getStaticPaths 将只在生产中的构建（build）过程中运行，在运行时不会调用它。可以使用此工具 (https://next-code-elimination.vercel.app/) 验证在 getStaticPaths 中编写的代码是否已从客户端捆绑包中删除。     getStaticPaths 的限制性：         (1) getStaticPaths 必须与 getStaticProps 一起使用         (2) 不能将 getStaticPaths 与 getServerSideProps 一起使用         (3) 可以从同样使用 getStaticProps 的动态路由导出 getStaticPaths         (4) 无法从非页面文件（例如组件文件夹）导出 getStaticPaths         (5) 必须将 getStaticPaths 导出为独立函数，而不是页面组件的属性     在开发模式（next dev）中，将对每个请求调用 getStaticPaths。     示例1，getStaticPaths 允许控制在构建过程中生成哪些页面，而不是通过 fallback 按需生成。创建 src/pages/render/repo/.js 文件，代码如下：
<div class="cnblogs_code">
<pre> export default ({ repo }) => {
 return repo.stargazers_count
 }

 export const getStaticPaths = async () => {
 return {
 paths: [
 {
 params: {
 name: 'next.js',
 },
 }, // See the "paths" section below
 ],
 fallback: true, // false or "blocking"
 }
 }

 export const getStaticProps = async () => {
 const res = await fetch('https://api.github.com/repos/vercel/next.js')
 const repo = await res.json()
 return { props: { repo } }
 }</pre>
</div>
            示例2，可以通过返回一个空的路径数组来推迟按需生成所有页面。创建 src/pages/render/posts/.js 文件，代码如下：
<div class="cnblogs_code">
<pre> export default ({ posts }) => {

 ...

 }

 export async function getStaticPaths() {
 // When this is true (in preview environments) don't
 // prerender any static pages
 // (faster builds, but slower initial page load)
 if (process.env.SKIP_BUILD_STATIC_GENERATION) {
 return {
 paths: [],
 fallback: 'blocking',
 }
 }

 // Call an external API endpoint to get posts
 const res = await fetch('https://.../posts')
 const posts = await res.json()

 // Get the paths we want to prerender based on posts
 // In production environments, prerender all pages
 // (slower builds, but faster initial page load)
 const paths = posts.map((post) => ({
 params: { id: post.id },
 }))

 // { fallback: false } means other routes should 404
 return { paths, fallback: false }
 }

 export const getStaticProps = async () => {

 ...

 return { props: { posts } }
 }</pre>
</div>
 
<h3>5. getServerSideProps</h3>
    如果从页面导出名为 getServerSideProps（服务器端渲染）的函数，Next.js 将使用 getServerSideProps 返回的数据在每次请求时预渲染该页面。     只有在需要渲染数据必须在请求时提取的页面时，才应使用 getServerSideProps。如果在请求期间不需要渲染数据，则应考虑在客户端或 getStaticProps 上获取数据。          getServerSideProps 适用于如下情景:         与 SEO 不相关，也不需要预渲染页面。数据经常更新，需要在请求时获取数据。     getServerSideProps 何时运行（被调用）:         (1) 当直接请求使用 getServerSideProps 的页面时，getServerSideProps 会在请求时运行，并且此页面将使用返回的 props 进行预渲染         (2) 当通过 next/link 或 next/router 在客户端页面转换时请求使用 getServerSideProps 页面时，next.js 会向服务器发送一个 API 请求，该请求运行 getServerSideProps         注：页面请求都会调用 getServerSideProps。getServerSideProps 只在服务器端运行，从不在浏览器上运行。     getServerSideProps 的限制性：         (1) 只有在配置了缓存控制标头的情况下才会缓存         (2) 无法从非页面文件（例如组件文件夹）导出 getServerSideProps         (3) 必须将 getServerSideProps 导出为独立函数，而不是页面组件的属性     示例1，在请求时使用 getServerSideProps 获取数据，代码如下：
<div class="cnblogs_code">
<pre> export default ({ data }) => {
 // Render data ...

 }

 // This gets called on every request
 export const getServerSideProps = async () => {
 // Fetch data from external API
 const res = await fetch(`https://.../data`)
 const data = await res.json()

 // Pass data to the page via props
 return { props: { data } }
 }</pre>
</div>
         注：如果 getServerSideProps 函数内 fetch 的 API 路由 (`https://.../data`) 是本地资源，就是不必要且效率低下的方法，因为它将导致由于服务器上运行 getServerSideProps 和 API 路由而产生额外的请求。             本地数据库、JSON 文件等资源，最好在 getServerSideProps 函数内直接调用，可以适当降低服务器的负载压力。当然，具体情况具体分析，在安全、效率和开发速度等因素之间，需要开发者自己根据产品需要做好平衡。                      示例2，使用服务器端渲染（SSR）进行缓存，代码如下：
<div class="cnblogs_code">
<pre> export default ({ data }) => {
 // Render data ...

 }

 // This value is considered fresh for ten seconds (s-maxage=10).
 // If a request is repeated within the next 10 seconds, the previously
 // cached value will still be fresh. If the request is repeated before 59 seconds,
 // the cached value will be stale but still render (stale-while-revalidate=59).
 //
 // In the background, a revalidation request will be made to populate the cache
 // with a fresh value. If you refresh the page, you will see the new value.
 export const getServerSideProps = async ({ req, res }) => {
 res.setHeader(
 'Cache-Control',
 'public, s-maxage=10, stale-while-revalidate=59'
 )

 ...

 // Pass data to the page via props
 return { props: { data } }
 }</pre>
</div>
     可以通过修改配置，在每页的基础上显式设置运行时，例如：
<div class="cnblogs_code">
<pre> export const config = {
 runtime: 'nodejs', // or "edge"
 }

 export const getServerSideProps = async () => {}</pre>
</div>
         注：getServerSideProps 可以与 Serverless 和 Edge Runtime 一起使用，并且可以在两者中设置 props。但是，当前在 Edge Runtime 中，无权访问响应对象。这意味着不能在 getServerSideProps 中添加 cookie。要访问响应对象，应该继续使用 Node.js Runtime，这是默认的 Runtime。     如果在 getServerSideProps 中抛出错误，它将显示 pages/500.js 文件。在开发过程中，不会使用此文件，而是显示 dev 覆盖。
 
<h3>6. Web 表单</h3>
    Web 表单具有客户端-服务器关系，一般被用于发送由 Web 服务器处理的数据以进行处理和存储。表单本身就是客户端，服务器是任何可以在需要时用于存储、检索和发送数据的存储机制。     示例，Web 表单提交数据到 /api/login，创建 src/pages/api/login.js 文件，代码如下：
<div class="cnblogs_code">
<pre> export default (req, res) => {
 // Get data submitted in request's body.
 const body = req.body

 // Optional logging to see the responses
 // in the command line where next.js app is running.
 console.log('body: ', body)

 if (!body.username || !body.password) {
 // Sends a HTTP bad request error code
 return res.status(400).json({ data: 'Username or password not found' })
 }

 // Found the name.
 // Sends a HTTP success code
 res.status(200).json({ data: `${body.username} ${body.password}` })
 }</pre>
</div>
     创建 src/pages/login.js 文件，代码如下：
<div class="cnblogs_code">
<pre> export default () => {
 // Handles the submit event on form submit.
 const handleSubmit = async (event) => {
 // Stop the form from submitting and refreshing the page.
 event.preventDefault()

 // Get data from the form.
 const data = {
 username: event.target.username.value,
 password: event.target.password.value,
 }

 console.log('data: ', data)

 // Send the data to the server in JSON format.
 const JSONdata = JSON.stringify(data)

 // API endpoint where we send form data.
 const endpoint = '/api/login'

 // Form the request for sending data to the server.
 const options = {
 // The method is POST because we are sending data.
 method: 'POST',
 // Tell the server we're sending JSON.
 headers: {
 'Content-Type': 'application/json',
 },
 // Body of the request is the JSON data we created above.
 body: JSONdata,
 }

 // Send the form data to our forms API on Vercel and get a response.
 const response = await fetch(endpoint, options)

 console.log('response: ', response)

 // Get the response data from server as JSON.
 // If server returns the name submitted, that means the form works.
 const result = await response.json()
 alert(`Login info: ${result.data}`)
 }

 return (
 <form onSubmit={handleSubmit}>
 &nbsp;

 <label for="username">Username: </label>
 <input type="text" id="username" name="username" required value="admin"/>

 <label for="password">Password: </label>
 <input type="text" id="password" name="password" required value="123456"/>

 <button type="submit">Submit</button>
 </form>
 )

 }</pre>
</div>
     开发模式运行 nextjs-demo 项目，使用浏览器访问 http://localhost:3000/login，显示 Login 页面，点击 Submit 按钮，跳出提示对话框。 
来源：https://www.cnblogs.com/tkuang/p/17629464.html

頁: [1]

琼殿技术论坛's Archiver

NodeJS系列（11）- Next.js 框架 (四) | 数据获取(Data Fetching)