Question

我对如何编写一个NextJS应用程序感到困惑，当我具有可重用的组件和“链接”以导航到应用程序的其他区域时，该应用程序将呈现页面服务器端。

文档说

“ getInitialProps”（SSR）仅用于“页面”，而不用于“组件”
“ componentWillMount”未在服务器端执行，仅其CLIENT端呈现
“链接”标记仅是客户端导航，因此其导航到的“页面”是呈现在客户端的

我的查询

我不清楚以下内容

如何将应用程序分解为可重用的组件，以保持服务器端呈现
如果您具有应用程序其他区域的链接，那么如何才能将其他区域呈现在服务器上？
如果链接是客户端，那么这肯定意味着只有初始页面才会在服务器端呈现，所以用NextJS编写应用程序而不是React的目的是什么
如果仅对页面调用“ getInitialProps”，则肯定意味着该页面的“ getInitialProps”必须对所有在其页面上呈现的数据进行服务器调用，然后再发送给子组件，但这肯定会非常慢。想象一个页面包含一个项目列表，将有1个服务器调用来获取项目列表。然后，对于列表中的每个项目，将需要一个调用以获取项目详细信息，并再次调用以获取项目图像。在呈现页面之前，这是很多服务器调用。

我的应用程序。

我认为用示例应用程序来说明我想做的事情会更容易。

我的应用程序具有几个“页面”：Tab-1，Tab-2，Tab-3，Tab-4以及Tab-1和Tab-2等中列出的项目的详细信息页面。
应用程序中的每个页面都具有相同的布局，页眉区域，标签栏，页面内容和页脚
单击选项卡栏中的项目，您可以导航到应用程序中的其他“页面”
每个标签都包含不同类别的项目的列表，单击列表中的项目会将用户带到该项目的详细信息“页面”

这是我的应用程序的图形表示。

项目结构

所有页面均使用布局模板添加页眉和页脚的主要结构，然后使用组件在页面中间添加其自己的内容

|- 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”中获取数据，这意味着该组件不会呈现服务器端。因此，这似乎完全破坏了编写NEXTJS的目的。

Component = layout_template.js

需要从服务器获取数据以传递到页眉和页脚。

Component = header.js

仅包含jsx标记

页面= Index.js（URL =“ /”或“ / index”）

没有从服务器获取任何数据，仅指定了jsx标记

组件= AlphabetList.js

从服务器获取字母项目列表，并使用其他组件进行渲染

组件= AlphabetListItem.js

从服务器获取商品图像，然后进行渲染。单击此组件后，应用程序将转到项目详细信息页面

页面= AlphabetItemDetails.js（URL =“ aitem / [id]”）

从服务器获取有关该商品的其他信息，并呈现该商品的填充详细信息

我如何构建代码？

为了使主布局/页眉/页脚呈现服务器端，是否需要复制代码以在每个页面的“ getInitialProps”中获取徽标？（即在index.js，tab2.js，tab3.js，tab4.js中。aitem / [id] .js，numitem / [id] .js？这似乎违背了任何不重复代码的体面代码设计，而是拉入可重用的代码
为了使页面中的所有数据都呈现在服务器端，我是否必须获取所有列表项，然后在页面的“ getInitialProps”中获取每个项的详细信息和图像URL？

Answer 1

首先，选项卡不必是新页面。标签可以是组件。

在主页（index.js）上，您可以将使用getInitialProps获得的数据传输到具有prop的组件。

您还可以通过布局通过prop将数据发送到诸如页眉和页脚之类的组件。对于标题中的徽标，您可以将_app.js创建到pages文件夹并使用getInitialProps从此处提取数据，而不必在每个页面上再次提取数据。

有关更多详细信息，您可以访问此页面https://nextjs.org/docs/getting-started

nextjs您如何将应用划分为使用服务器端渲染的可重用组件

1 个答案: