如何在 Next.js 中使用服务器端渲染将我的应用分成可重用的组件
How to divide my app into reusable components using server side rendering in Next.js
我对编写一个 Next.js 应用程序感到困惑，当我有可重用的组件和 <Link> 导航到应用程序的其他区域时，它将在服务器端呈现页面。
文档说
getInitialProps (SSR) 仅 调用 pages，而不调用组件componentWillMount 不 在服务器端执行，它的 仅在客户端渲染<Link> 标签只是客户端导航，因此它导航到的“页面”呈现在客户端
我的问题
我不清楚以下内容：
- 如何将您的应用程序分解为可重用的组件以保持服务器端呈现？
- 如果有
<Link>到应用程序的其他页面，如何在服务器上呈现其他页面？
- 如果
<Link>s 是客户端，这肯定意味着只有初始页面将在服务器端呈现，那么用 Nextjs 而不是普通的 React 编写应用程序有什么意义？
- 如果只为页面调用
getInitialProps，这肯定意味着页面的 getInitialProps 必须对其页面上呈现的任何数据执行所有服务器调用，然后发送到子组件，并且这一定很慢。如果一个页面包含一个项目列表，将有一个服务器调用来获取项目列表，并且对于列表中的每个项目，都需要一个调用来获取项目详细信息，另一个调用来获取项目图片。在呈现页面之前，这是 很多 次服务器调用。
我的申请
我认为用一个我希望能够做的事情的示例应用程序来说明我的问题会更容易。
- 我的应用程序有几个页面：Tab-1、Tab-2、Tab-3、Tab-4 以及 Tab-1 和 Tab-2 等中列出的项目的详细信息页面。
- 我的应用程序中的每个页面都具有相同的布局、页眉区域、标签栏、页面内容和页脚
- 单击选项卡栏中的项目后，您可以导航到我的应用程序中的其他页面
- 每个选项卡都包含不同类别的项目列表，单击列表中的项目会将用户带到该项目的详细信息“页面”
这是我的应用程序的图形表示。
项目结构
所有页面使用layout-template添加页眉和页脚的主要结构，然后使用组件在页面中间添加自己的内容
|- pages
|- index.js (i.e. tab-1)
|- tab2.js
|- tab3.js
|- tab4.js
|- aitem
|- [id].js
|- numitem
|- [id].js
|- Components
|- layout-template.js --- needs data to pass to header/footer
|- header.js
|- footer.js
|- AlphabetList --- needs data
|- AlphabetListItem --- needs data
下面是我的组件示例，展示了它们如何构成我的应用程序。在某些组件中看到他们必须从服务器获取数据。
因为它们是组件，所以它们在 componentWillMount 中获取数据，这意味着该组件将 不会 呈现服务器端。因此这似乎完全违背了写作 Next.js.
的目的
Component = layout_template.js 需要从服务器获取数据传递给页眉和页脚
Component = header.js 只包含 JSX
Page = Index.js (URL= "/" or "/index")不从服务器获取任何数据，只是指定JSX
Component = AlphabetList.js 从服务器获取字母表项目列表并使用另一个组件呈现它
Component = AlphabetListItem.js 从服务器获取项目的图像然后渲染它。单击此组件后，应用会转到项目的详细信息页面
Page = AlphabetItemDetails.js ( URL = "aitem/[id]") 从服务器获取有关项目的附加信息并呈现项目的填充详细信息
如何构建我的代码？
- 对于在服务器端呈现的主要 layout/header/footer，我是否必须复制代码以在 的每个页面中获取
getInitialProps 中的徽标？即 index.js、tab2.js、tab3.js、tab4.js、aitem/[id].js 和 numitem/[id].js？这似乎违背了不重复代码而是引入可重用代码的任何体面的代码设计。
- 要在服务器端呈现页面中的所有数据，我是否必须获取所有列表项，然后在
getInitialProps 中获取每个项目的详细信息和图像 URL页数？
首先，标签不必是新页面。选项卡可以是组件。
在主页面（index.js），您可以将使用 getInitialProps 获取的数据传输到具有 prop 的组件。
你也可以通过Layout通过prop向header、footer等组件发送数据。对于页眉中的徽标，您可以创建 _app.js 到 pages 文件夹并使用 getInitialProps 从此处提取数据，而不是在每个页面上再次提取数据。
更多详细信息，您可以访问此页面https://nextjs.org/docs/getting-started
我对编写一个 Next.js 应用程序感到困惑，当我有可重用的组件和 <Link> 导航到应用程序的其他区域时，它将在服务器端呈现页面。
文档说
getInitialProps(SSR) 仅 调用 pages，而不调用组件componentWillMount不 在服务器端执行，它的 仅在客户端渲染<Link>标签只是客户端导航，因此它导航到的“页面”呈现在客户端
我的问题
我不清楚以下内容：
- 如何将您的应用程序分解为可重用的组件以保持服务器端呈现？
- 如果有
<Link>到应用程序的其他页面，如何在服务器上呈现其他页面？ - 如果
<Link>s 是客户端，这肯定意味着只有初始页面将在服务器端呈现，那么用 Nextjs 而不是普通的 React 编写应用程序有什么意义？ - 如果只为页面调用
getInitialProps，这肯定意味着页面的getInitialProps必须对其页面上呈现的任何数据执行所有服务器调用，然后发送到子组件，并且这一定很慢。如果一个页面包含一个项目列表，将有一个服务器调用来获取项目列表，并且对于列表中的每个项目，都需要一个调用来获取项目详细信息，另一个调用来获取项目图片。在呈现页面之前，这是 很多 次服务器调用。
我的申请
我认为用一个我希望能够做的事情的示例应用程序来说明我的问题会更容易。
- 我的应用程序有几个页面：Tab-1、Tab-2、Tab-3、Tab-4 以及 Tab-1 和 Tab-2 等中列出的项目的详细信息页面。
- 我的应用程序中的每个页面都具有相同的布局、页眉区域、标签栏、页面内容和页脚
- 单击选项卡栏中的项目后，您可以导航到我的应用程序中的其他页面
- 每个选项卡都包含不同类别的项目列表，单击列表中的项目会将用户带到该项目的详细信息“页面”
这是我的应用程序的图形表示。
项目结构
所有页面使用layout-template添加页眉和页脚的主要结构，然后使用组件在页面中间添加自己的内容
|- pages
|- index.js (i.e. tab-1)
|- tab2.js
|- tab3.js
|- tab4.js
|- aitem
|- [id].js
|- numitem
|- [id].js
|- Components
|- layout-template.js --- needs data to pass to header/footer
|- header.js
|- footer.js
|- AlphabetList --- needs data
|- AlphabetListItem --- needs data
下面是我的组件示例，展示了它们如何构成我的应用程序。在某些组件中看到他们必须从服务器获取数据。
因为它们是组件，所以它们在 componentWillMount 中获取数据，这意味着该组件将 不会 呈现服务器端。因此这似乎完全违背了写作 Next.js.
Component = layout_template.js 需要从服务器获取数据传递给页眉和页脚
Component = header.js 只包含 JSX
Page = Index.js (URL= "/" or "/index")不从服务器获取任何数据，只是指定JSX
Component = AlphabetList.js 从服务器获取字母表项目列表并使用另一个组件呈现它
Component = AlphabetListItem.js 从服务器获取项目的图像然后渲染它。单击此组件后，应用会转到项目的详细信息页面
Page = AlphabetItemDetails.js ( URL = "aitem/[id]") 从服务器获取有关项目的附加信息并呈现项目的填充详细信息
如何构建我的代码？
- 对于在服务器端呈现的主要 layout/header/footer，我是否必须复制代码以在 的每个页面中获取
getInitialProps中的徽标？即 index.js、tab2.js、tab3.js、tab4.js、aitem/[id].js和numitem/[id].js？这似乎违背了不重复代码而是引入可重用代码的任何体面的代码设计。 - 要在服务器端呈现页面中的所有数据，我是否必须获取所有列表项，然后在
getInitialProps中获取每个项目的详细信息和图像 URL页数？
首先，标签不必是新页面。选项卡可以是组件。
在主页面（index.js），您可以将使用 getInitialProps 获取的数据传输到具有 prop 的组件。
你也可以通过Layout通过prop向header、footer等组件发送数据。对于页眉中的徽标，您可以创建 _app.js 到 pages 文件夹并使用 getInitialProps 从此处提取数据，而不是在每个页面上再次提取数据。
更多详细信息，您可以访问此页面https://nextjs.org/docs/getting-started