【问题标题】:Some NextJS questions regarding static/hybrid and SSR builds关于静态/混合和 SSR 构建的一些 NextJS 问题
【发布时间】:2021-04-17 04:46:40
【问题描述】:

所以,我是 NextJS 的新手,我在一定程度上了解 getStaticProps、getServerSideProps 等的用法……但是,我没有考虑到用例的细微差别。我希望根据以下条件,您可以告诉我要使用哪种类型的生成。

产品页面: --- 大部分是通过products ids检索的,数据变化不大 --- 有一些“动态内容”,但它是次要的。喜欢在某些条件下应用 % 折扣?

哪个?

主页: --- 大部分都是静态的.. 即评论/产品信息等.. 但是 --- 有一个标题(显示在所有页面上),如果用户登录,则显示用户名。 哪个?

【问题讨论】:

    标签: next.js


    【解决方案1】:

    我建议从基本层面理解 getStaticPropsgetServerSideProps

    听起来比实际复杂。一个简单的规则是问自己:

    1. 我是否希望在每次更改内容时在构建时生成特定页面?这意味着您的 CI 服务器 构建页面,即您的 Vercel、AWS Amplify、GitHub 操作、GitLab Pipelines 等会在每次内容更改时重新生成静态页面。使用getStaticProps

    1. 我希望网络服务器在每次浏览器请求时实时生成页面吗?使用getServerSideProps

    这是卓越性能(构建时间)和内容新鲜度(实时)之间的权衡。

    Next.js 的策略是将尽可能多的渲染转移到静态(构建时间),然后以智能方式根据需要刷新相关内容。这就是 revalidate 选项出现的地方,产品页面是这里的教科书用例。

    【讨论】:

    • 我明白了,但是如果 90% 的页面是静态的,那该怎么办。它没有太大变化,但是有些促销项目需要更新或动态......使用 getStaticProps 和一些 apis in useEffect 来饱和动态内容是否明智?并使用“重新验证”来确保我们获得更新(如果需要)?
    • 您可以在客户端通过 XHR 将促销呈现为小部件 - 前提是 API 是公开的,否则您需要使用 api 路由(或任何其他代理/网关)对其进行屏蔽。如果您使用像样的加载器处理 UX,则可以工作。在我看来,revalidte 选项是一个单独的策略,因为它是 SSR/SSG 的组合。我认为我们将来会有更多选择(参见最近宣布的服务器端组件),但现在您可能需要在 XHR(客户端)、revalidate 或完整 SSR 之间进行选择。取决于您的用例中各种元素的权重(用户体验、搜索引擎优化、性能)
    【解决方案2】:

    我认为在这两个页面上都应该使用 getStaticProps。 在这种情况下 1:您使用 getStaticPaths 按 id 导出所有生产页面。由于您的需求数据不会在产品页面上定期更改,您可以使用revalidate 属性来更新内容或重建项目。

    此处参考:https://nextjs.org/docs/basic-features/data-fetching

    【讨论】:

    • 在Production页面,你也使用getServerSideProps,性能和getStaticProps相差不大
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-20
    • 1970-01-01
    • 1970-01-01
    • 2021-06-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多