React SSR，正确处理页面滚动位置的方式

文章/答案/技术大牛

发布

1回答

reactjs、next.js、server-side-rendering

我的目标是根据用户的滚动位置应用不同的className。如果用户的滚动位置大于0，我需要更改导航栏的背景颜色。我想出了一个在所有情况下都有效的解决方案，除了如果用户加载一个页面并且初始滚动位置不是0(滚动然后重新加载页面)的情况。我所做的是创建了一个自定义钩子，它看起来像这样： import

浏览 12提问于2019-07-27得票数 3

1回答

在react服务器端呈现的应用程序中启用滚动

javascript、reactjs

你好，我正在将react应用程序从客户端渲染(CSR)迁移到服务器端渲染(SSR)。我已经在csr中实现了下面的代码，以便在滚动到页面末尾时能够加载更多内容。我得到的问题是，它现在给出一个错误，“ReferenceError:窗口未定义”后，迁移代码到ssr。我如何重构代码，使滚动位置在react服务器端渲染的应用程序中工作？在csr中实现的支持滚动的代码 exp

浏览 17提问于2020-01-09得票数 0

回答已采纳

1回答

反作用中的服务器端呈现是否有助于动态表示？

node.js、reactjs、rest、architecture、server-side-rendering

我的问题：为我的论文，我正在创建一个拍卖网站。我有一个管理面板，我想要有一些配置，以便管理员可以指定，如果在拍卖结束前10天，一些组件应该以不同的方式显示，有些应该是不可见的，等等。我已经知道了：，我已经阅读了所有关于ssr或反应中通用渲染的优缺点的文章。现在我只想知道它是否对动态演示有任何帮助，或者如果我选择SSR或CSR并不重要。的小问题：，我还没有准备好整个体系结构。我所知道的是，我想要一个

浏览 1提问于2018-05-22得票数 0

1回答

客户端呈现和服务器端呈现在相同的数据/页面上？

next.js、server-side-rendering、csr

我有一个无限滚动的项目库，我想在一个页面上显示。此页面还具有项的筛选选项。我在想，我可以使用SSR来获取页面加载的前20个条目，然后使用CSR (可能通过react query)在用户滚动或更新过滤器中填充条目。从文档和我对下一步的了解来看，在同一个页面上使用SSR和CSR似乎不是一个问题。我想了解的是，在谈到获取相同的数据集时

浏览 7提问于2022-07-16得票数 2

2回答

usePreventScroll在Nextjs中引发useLayoutEffect警告

javascript、reactjs、next.js、react-aria

我正在学习Next.js，并且正在尝试将@react-aria/overlays包集成到我的项目中。<Component {...pageProps} /> </SSRProvider>} 导出默认应用；当打开我的浏览器并加载一个页面时，它给出了以下错误See https://reactjs.org/link/uselayouteffect-

浏览 97提问于2020-10-31得票数 0

回答已采纳

3回答

NextJS有单页应用程序模式吗？

reactjs、next.js、single-page-application、server-side-rendering

我有一个使用React & NextJS的项目。目前，我有一个定制的_app.js，使页面成为SSR。但是现在我不想在服务器端加载页面。有什么办法吗？

浏览 5提问于2020-10-14得票数 1

回答已采纳

1回答

我可以在NextJS中使用getServerSideProps的服务器端道具来初始化动态吗？

javascript、reactjs、next.js、server-side-rendering

我目前正在使用NextJS创建一个简单的应用程序，我想知道使用页面上也是动态的应用程序接口中的数据来处理SSR的最佳方法是什么。我目前的方法概述如下，我很好奇在NextJS中是否应该这样做。我在Home页面组件中使用getServerSideProps从免费的JSON占位符API中检索了一组待办事项，如下所示(请注意，我使用的是TypeScript)： export const getServerSideProps，

浏览 2提问于2021-10-09得票数 0

2回答

反应性-路由器-dom v6 StaticRouter上下文不工作。

node.js、reactjs、express、react-router、server-side-rendering

我试着让SSR反应网络应用程序。除了staticContext，一切都很好。我的服务器代码是 const content = renderToString(我的代码有可能被废弃了吗？我使用的是目前所有依赖项的最新稳定版本。我的package.json依赖项 "@emotion/react": &q

浏览 12提问于2021-12-26得票数 0

回答已采纳

9回答

下一步js -禁用某些页面上的服务器端呈现。

reactjs、next.js、server-side-rendering

是否可以使用下一个js在某些页面上禁用ssr？例如，我有一个带有产品描述的页面，其中我使用ssr作为SEO，但我也有一个包含可以筛选的项目或产品列表的页面，对于该页面，我不想使用ssr，因为这个页面每次都会动态生成，我如何禁用这个页面上的ssr？

浏览 3提问于2018-11-04得票数 69

回答已采纳

1回答

刷新时将子元素应用于窗口的溢出位置

javascript、html、css、reactjs

我在一个React应用程序中有一个搜索结果页面，用户可以在其中选择过滤器，这反过来会更新URL的查询参数，并导致在React中重新安装。我在多个浏览器上遇到的一个问题是，如果我的过滤器在溢出-y容器中，那么子溢出的位置将应用到重新挂载的窗口。下面是一个例子：组件将重新安装。

浏览 1提问于2018-03-27得票数 0

回答已采纳

1回答

React Starter Kit与Next.js

javascript、isomorphic-javascript、server-side-rendering、react-starter-kit、next.js

我们正在研究使用React构建内容发布网站的框架/库，关键要求是常见的SEO，页面速度，以及服务器端渲染的简易性。有没有在中型和大型应用程序的生产环境中使用的经验？有人试过吗？我刚接触React工具包和框架，据我所知，RSK只是一个同构的样板，而next.js也是同构的，尽管它具有服务器端渲染功能。它们是如何比较的，在什么情况下可能会起作用？我不一定要寻找一个容易组装的样

浏览 18提问于2017-06-07得票数 1

2回答

wrapRootElement + contextAPI :页面更改导致提供程序重新呈现，因此正在重置状态

reactjs、gatsby、react-context

摘要关于如何调试这个问题的一些建议，我将非常感谢！

浏览 2提问于2020-03-10得票数 0

2回答

Next.js: react颜色-警告:道具`样式‘不匹配

javascript、reactjs、next.js、react-color

 我正在使用Next.js框架&在react-color中使用index.js时会收到警告。这里是index.js**:** return <SketchPicker

浏览 6提问于2020-04-06得票数 2

1回答

服务器端呈现是如何在Next.js中工作的？

reactjs、next.js、server-side-rendering

我是Next.js的新手，来自一个快速/创建-反应-应用背景，我不知道Next.js是如何工作的。使用高速公路上的SSR，我们将单击一个链接，服务器将发送相应的ejs/pug/html页面，以匹配新的路由。如预期的那样，客户端上的状态丢失了。但是对于Next.js，客户端的状态保持不变，这不是我所期望的SSR的行为方式</em

浏览 1提问于2021-10-29得票数 2

1回答

创建gatsby-browser.js的干燥版本gatsby-ssr.js

javascript、reactjs、gatsby

在我的构建中，我有两个具有相同代码的文件：gatsby-browser.js和gatsby-ssr.js。代码非常简单，它使用wrapPageElement在<Layout />组件中包装页面： // gatsby-browser.js gatsby-ssr.js import Layout from '.{ return <Lay

浏览 10提问于2021-03-18得票数 2

回答已采纳

2回答

如何在广泛使用React时利用Next.js服务器端呈现？

javascript、reactjs、next.js、server-side-rendering

最近，我开始开发一个使用Next.js的前端项目，并且我试图找出如何最好地利用它提供的SSR。我也想使用一些客户端抓取，虽然解释说，在组件中使用React钩子会使它呈现客户端，但对于这对DOM树上/下的其他组件的影响似乎很少。到目前为止，我发现了一些事情，我想知道我的假设是否正确：似乎使用钩子的组件就像典型的React -当父呈现中的效果/状态钩子重新呈现时，它们的

浏览 14提问于2022-11-10得票数 3

回答已采纳

1回答

带CRA的放大器页面

reactjs、create-react-app、amp-html

有一个简单的方法使用创建-反应-应用程序创建一个静态 AMP登陆页？它们可以很容易地用NextJS创建。问题是，我们目前的网站已经建立了CRA和迁移到NextJS将是困难的。有一些过时的资源可用(如)，但它们没有考虑到目前的发展，无论是在CRA和AMP (如)方面。谢谢。

浏览 1提问于2019-11-30得票数 0

0回答

Angular 2中的浏览器样式滚动行为

angular、custom-scrolling

在React中有一个叫做react-router-scroll的东西：。它可以让React应用程序的页面像普通网站一样滚动。因此，它滚动到每个新页面(路径)的顶部，并保留过去页面的滚动位置；当您单击back按钮时，它会记住您在该页面上滚动到的位置。我正在Angular2中寻找类似的东西。我找

浏览 5提问于2016-12-28得票数 3

回答已采纳

1回答

动态内容在仅加载safari时移动到中间的页面

javascript、single-page-application、docusaurus

我创建了一个基于docusaurus的网站，其中包括一些自定义的react组件，这些组件使用可加载组件加载动态导入。当我在页面之间导航时，Chrome和Firefox都能正常工作，但在Safari上，当页面加载时，它会从中间的某个位置开始显示，这取决于我在该页面上有多少react组件。我不确定这是否是导致问题的原因。如何确保文档页面只在顶部加载，即使页面上有动态内容(没有s

浏览 13提问于2021-06-01得票数 0

4回答

使用React路由器6导航时恢复滚动位置

javascript、reactjs、react-router-dom

当我导航和刷新浏览器窗口时，我如何设置restore路由器6来恢复滚动位置？包和需要v5。(oaf-react路由器确实列出了它支持v6的列表，但是与v6不兼容，仍然是开放的。)Gatsby和Next.js支持滚动恢复，但我看上去不像有一个打包整齐的

浏览 35提问于2022-01-27得票数 5

回答已采纳

点击加载更多