背景
Next.js 是一个基于 React 的服务端渲染框架。在构建网站或 web 应用时，我们通常需要从数据库、API 或者其他数据源中获取数据来填充页面。Next.js 提供了多种方式来实现这一点，本文将介绍其中几种常见的方式，希望能够帮助读者更好地理解和使用 Next.js。
使用静态生成
静态生成是 Next.js 的默认方式，它在构建时就将页面生成为静态 HTML 文件并保存在硬盘上。在页面被访问时，只需要将静态 HTML 文件返回给客户端即可，不需要再次访问数据源。这种方式适用于数据不经常更新或者相对固定的情况。
在 Next.js 中，我们可以通过在页面组件中定义一个 getStaticProps 静态方法来获取数据。例如，假设我们要在页面中展示一篇博客文章，可以在 pages/article.js 中这样写：
------ ------- -------- --------- ------- -- -
------ -
-----
------------------------
------------------------
------
--
-
------ ----- -------- ---------------- -
------ -
------ -- ------- - --- --- - -- - ------- - --- --- - ---
--------- -----
--
-
------ ----- -------- ---------------- ------ -- -
-- -- --------- ------
----- ------- - ----- ---------------------------------------------- -- ------------
------ - ------ - ------- - --
-这里，getStaticPaths 静态方法负责返回所有可能访问的路径，用于生成静态 HTML 文件。而 getStaticProps 静态方法则负责获取具体的数据，并将它们作为 props 参数传递给组件。
使用服务端渲染
服务端渲染是另一种常见的数据获取方式，它在每次页面被访问时都会从数据源中获取最新数据，并动态地生成 HTML 返回给客户端。这种方式适用于数据需要经常更新或者根据客户端请求进行动态调整的情况。
在 Next.js 中，我们可以通过在页面组件中定义一个 getServerSideProps 静态方法来实现服务端渲染。例如，假设我们要在页面中展示一个最新的新闻列表，可以在 pages/news.js 中这样写：
------ ------- -------- ------ ---- -- -
------ -
-----
-------------
----
-------------- -- -
--- -------------------------------
---
-----
------
--
-
------ ----- -------- -------------------- -
-- -----------
----- ---- - ----- --------------------------- -- ------------
------ - ------ - ---- - --
-这里，getServerSideProps 静态方法负责获取最新的新闻列表数据，并将它们作为 props 参数传递给组件。
使用客户端渲染
客户端渲染是一种将数据获取和页面渲染分开的方式，它在页面加载完成后通过异步请求获取数据，并动态地更新页面内容。这种方式适用于数据需要根据用户交互或者其他变化进行更新的情况。
在 Next.js 中，我们可以通过在客户端代码中使用 useEffect 钩子函数来获取数据并更新页面。例如，假设我们要在页面中展示一个最新的天气信息，可以在 pages/weather.js 中这样写：
------ ------- -------- --------- -
----- --------- ----------- - -------------
------------ -- -
---------------------
--------- -- -----------
---------- -- ------------------
-- ----
------ -
-----
----------------
----------------------- -- -----------------
------
--
-这里，useEffect 钩子函数负责在页面加载完成后异步请求最新的天气信息，并将它们保存到组件的状态中。页面内容会在数据加载完成后动态更新。
总结
本文介绍了 Next.js 中使用多种数据源来填充页面的常见方式，并给出了相应的示例代码。不同的数据获取方式适用于不同的场景，读者可以根据实际需求选择合适的方式。同时，通过学习 Next.js 中的数据获取方式，读者也可以更好地理解和使用服务端渲染框架。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664fdf7ad3423812e418bf9c