Next使用方式调研

春花儿
508 阅读5分钟

官方文档：www.nextjs.cn/learn/basic… 民间中文官网：nextjs.frontendx.cn/docs/#%E5%A…

Next使用场景：

  • 必须使用打包程序（例如 webpack）打包代码，并使用 Babel 等编译器进行代码转换。
  • 你需要针对生产环境进行优化，例如代码拆分。
  • 你可能需要对一些页面进行预先渲染以提高页面性能和 SEO。你可能还希望使用服务器端渲染或客户端渲染。
  • 你可能必须编写一些服务器端代码才能将 React 应用程序连接到数据存储。

Next提供的功能：

创建Next应用：

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

其背后的工作是通过调用 create-next-app 工具完成的，该工具为你创建了一个 Next.js 应用程序。通过 --example 参数指定使用 此模板 。

组件

页面间导航-Link组件

import Link from 'next/link'

内置CSS和sacss支持

修改Head 使用Next的Head组件自定义Head，如果要自定义＜html＞，例如添加lang属性，可以通过创建pages/_document.js文件来实现。

其他的和正常的React组件差不多。

预渲染的两种形式

Next.js 有两种预渲染形式：Static Generation和Server-side Rendering。区别在于它何时为页面生成 HTML。

  • 静态生成是在构建时生成 HTML 的预渲染方法。然后在每个请求上重新使用预呈现的 HTML。
  • 服务器端呈现是在每个请求上生成 HTML 的预呈现方法。

何时使用静态生成与服务器端渲染

我们建议尽可能使用静态生成（有和没有数据），因为您的页面可以构建一次并由 CDN 提供服务，这比让服务器在每次请求时呈现页面要快得多 。

您可以为多种类型的页面使用静态生成，包括：

  • 营销页面
  • 博文
  • 电子商务产品列表
  • 帮助和文档

您应该问问自己：“我可以在用户请求之前预呈现此页面吗？” 如果答案是肯定的，那么你应该选择Static Generation。

另一方面，如果您不能在用户请求之前预呈现页面，那么静态生成不是一个好主意。 也许您的页面显示经常更新的数据，并且页面内容会在每次请求时发生变化。

在这种情况下，您可以使用服务器端渲染。它会更慢，但预渲染页面将始终是最新的。或者您可以跳过预呈现并使用客户端 JavaScript 来填充经常更新的数据。

首屏渲染需要进行网络请求

添加getStaticProps到内部，调用网络请求，将结果return为props，作为组件的props。

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

静态渲染获取外部 API 或查询数据库：

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}

注意：Next.jsfetch()在客户端和服务器上进行 polyfill。不需要导入。

也可以直接查询数据库：

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

这是可能的，因为只在服务器端getStaticProps运行。它永远不会在客户端运行。它甚至不会包含在浏览器的 JS 包中。这意味着您可以编写直接数据库查询等代码，而无需将它们发送到浏览器。

开发与生产

因为它意味着在构建时运行，所以您将无法使用仅在请求时可用的数据，例如查询参数或 HTTP 标头。

服务端渲染获取外部 API 或查询数据库：

要使用Server-side Rendering，您需要导出getServerSideProps而不是getStaticProps从您的页面导出。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

getServerSideProps仅当您需要预呈现其数据必须在请求时获取的页面时才应使用。到第一个字节 ( TTFB ) 的时间将比getStaticProps服务器必须计算每个请求的结果要慢，并且如果没有额外配置， CDN无法缓存结果。

客户端渲染

如果不需要预渲染数据，也可以使用以下策略（称为Client-side Rendering）：

  • 静态生成（预呈现）不需要外部数据的页面部分。
  • 当页面加载时，使用 JavaScript 从客户端获取外部数据并填充其余部分。

什么时候应该使用客户端渲染？ 与 SEO 无关的私人的、用户特定的页面。

SWR

Next.js 背后的团队创建了一个名为SWR的用于数据获取的 React 钩子。如果您在客户端获取数据，我们强烈推荐它。它处理缓存、重新验证、焦点跟踪、间隔重新获取等。

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
avatar
文章
阅读
粉丝