作为一个大受欢迎的 React 框架，Next.js 提供了 getInitialProps 方法来获取数据和参数。这种方法是用来在服务端预加载数据，以便在页面渲染前传递到组件中。但是，正确的使用方法却有一定的技巧。
getInitialProps 的基本使用方法
getInitialProps 是在 Next.js 中渲染页面时预加载数据的默认方法。当 Next.js 发现在页面中定义了这个方法，它会在渲染页面前调用这个方法，并且将获取到的数据作为参数传递到页面组件中。
这个方法应该返回一个对象，这个对象会在组件的 props 中可用，以便组件使用其中的数据。
下面是一个简单的 Next.js 组件例子，它使用 getInitialProps 方法获取静态数据。
-- -------------------- ---- -------
----- ---- - -- ---- -- -- -
-----
---------------------
---------------------
------
-
-------------------- - ----- ---------- -
----- --- - ----- ------------------------------------
----- ---- - ----- ----------
------ - ---- -
-
------ ------- ----在这个例子中，Page 组件从地址 http://api.example.com/data 中获取数据，并且将获取到的数据通过 props 传递到组件中。
指定 getInitialProps 中的参数
getInitialProps 还可以接受参数，以便在页面中进行更加复杂的数据预加载。在组件中，可以通过 this.props 获取这些参数。
在页面中指定参数的方法有两种：在组件中使用 withRouter 高阶组件，或者作为 URL 参数传递。
使用 withRouter 高阶组件
withRouter 将组件包装在一个路由器中，为它提供了路由信息。它可以使 Next.js 组件中的 getInitialProps 方法获取到路由参数。
-- -------------------- ---- -------
------ - ---------- - ---- -------------
----- ---- - -- ----- ------ -- -- -
-----
---------------------
---------------------
--------- ------ ------------------------
------
-
-------------------- - ----- ---------- ----- -- -
----- --- - ----- ---------------------------------------------------
----- ---- - ----- ----------
------ - ---- -
-
------ ------- ----------------在这个例子中，withRouter 将路由参数传递给 Page 组件并且包装了它，这样 getInitialProps 可以使用它来获取数据。
作为 URL 参数传递
Next.js 还允许通过 URL 参数传递数据，以便在 getInitialProps 中使用。
-- -------------------- ---- -------
----- ---- - -- ---- -- -- -
-----
---------------------
---------------------
------
-
-------------------- - ----- ---------- ----- -- -
----- --- - ----- ---------------------------------------------------
----- ---- - ----- ----------
------ - ---- -
-
------ ------- ----在这个例子中，页面的 URL 为 /page?param=value，getInitialProps 拿到的参数会放在 query 中。
总结
通过正确地使用 getInitialProps 方法，可以在服务端预加载数据，以便在页面渲染前传递到组件中。有了正确的使用方法，您可以在 Next.js 中获得更好的性能和体验。
同时，这种方法在组件获取、预渲染和搜索引擎优化等方面也有很大的优势。因此，在使用 Next.js 的过程中，必须要掌握 getInitialProps 的正确姿势，以便在项目开发中更好地发挥它的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa4a9048841e989466e38d